Why Tabs are on Top in Firefox 4.0

Firefox 5 Beta will be here soon but Firefox 4 introduced a controversial change, which hopefully gets addressed in this next release!

With Firefox 4, Tabs are by default, positioned above the address bar! There were user testing done and have proved "that some people do feel comfortable with the new tab position as soon as they get used to it". As an option, users can check off this default setting with View>Toolbars> (check off) Tabs on Top, to get back to the 3.x look, which seems to make better sense.

Before commenting further, it is fair to understand the rationale (with a video) behind this change. The link even provided some of mockups you see used in the video. For your easy reference, below is a summarize excerpt from Sitepoint:

Mozilla cite four main reasons for their change of opinion:

1. The conceptual model: the address bar and controls apply to the current tab.
2. App tabs: like Chrome, Firefox 4.0 will allow you pin small regularly-used tabs to the tab bar. The address bar and other controls will be removed for these web applications.
3. Tab-based UI: Firefox 4.0 will show windows such as downloads and the bookmarks organizer in tabs. It makes no sense to have the address bar and other controls visible.
4. Notifications: some error and warning messages now appear below the address bar.

There are indeed some sound and valid reasons for the change. The repositioning of the tab might be a bit pre-mature since most users are still browsers rather than web app users. But why has this new tab position caused such a controversy to start with? The assumption that the address bar belongs to the tab is probably the basis of it all. It is not really a simple cognitive issue and it contradicts with our mental model of an address!

If an address belongs to a house, should we be seeing the house first or the address first? The address bar is a dynamic field and controls the content of the tab, it does not belong to the tab per se. From the video, it seems that the decision was made based on a layout issue rather than a UX design issue. There seemed no differentiation between dynamic and static fields, all fields are treated the same... static!

This is a very good example to illustrate the fine-line-decision-making in a multidisciplinary design team. And it is all these subtle factors that make user experience design a challenging and interesting job!

Ranking Creativity...

"Creativity is key to CEOs", an article by Anushkar Mohinani for IDG

"According to an IBM survey of 1,541 chief executives from 60 countries and 33 industries globally, chief executive officers (CEOs) identified 'creativity' as the most important leadership quality." (full article)

"Does being creative help you climb to the top?", an article by Matthew Knight for CNN

"Mueller and her collaborators conclude that "organizations may face a bias against selecting the most creative individuals as leaders in favor of selecting leaders who would preserve the status quo by sticking with feasible but relatively unoriginal solutions." (full article)

These are really complementary studies. The problem is not on creativity itself, but how it was received. To further this topic, here is an extract from "To Unlock Creativity, Learn from Steve Jobs", an article by Carmine Gallo for Bloomberg Businessweek

"According to the Harvard research, the No.1 skill that separates innovators from noncreative professionals is "associating"—the ability to successfully connect seemingly unrelated questions, problems, or ideas from different fields. The three-year Harvard research project confirms what Jobs told a reporter 15 years earlier: "Creativity is just connecting things." (full article)

"Changing Education Paradigms", another great TED talk by Ken Robinson, presented with a wonderful animated piece from RSA Animate, a highly creative piece explaining how education systems can victimize creativity, especially Arts. Enjoy!

Book Report: The Back of the Napkin, by Dan Roam

Dan Roam describes his visual thinking method as "... forcing ourselves to look at our idea from every point on the SQVID, a fascinating thing happens, with an equally fascinating outcome. We fullly activate both the left ("analytic") and right ("creative") sides of our brain."

He calls his thinking process toolkit, the swiss knife 3-4-5-6:

• 3 for tools: eyes, mind and hands
• 4 for process: look, see, imagine and show
• 5 for focus: SQVID (simple, quality, vision, individual, and delta -- change)
• 6 for framework: Portrait, chart, map, timeline, flowchart, and multiple-variable plots

I believe understanding 3, 4, 5, 6 is easy; but executing 3-4-5-6 is not. The visual thinking codex is a mesh, a matrix. It works best pictorialized:

This thinking matrix is based on Roam's graphics equalizer, which I find extremely useful:

 

I was also pleasantly surprised to find him writing about messaging and email (Page 122 -124) -- using a fake software vendor (SAX Inc) in his MBA crash course (Chapter 8 - 14).  It was inspiring to read about Bain & Company, whose logo derived from the earth's 2 North Poles, differentiating "how we are going to get there" from "we are going to get there". The book actually gets more interesting and inspiring as you read on.

To be honest, I had to make 3 attempts to get myself started on this book. At first, I was frustrated by it's casual monologue style of writing. Then I thought I should just scan the book by studying the pictures... but  that didn't work. Finally I realized that this book should be read "with pictures", and that the writing style is meant to have the author himself explaining his sketches as he draws, just like we would when we are presenting or sketching out your ideas.  So there... hope you enjoy your read too!

I'd like to dedicate this book report to Jon Asbury (my mentor) for introducing me the book, and Miss Yung (my English Literature teacher) for giving me the ability to appreciate.

"Look and Feel" vs. "Appearances and Behaviors"

We often hear this term "Look and Feel".  But who's look and who's feel are we talking about? "Appearances and Behaviors", does this mean the same thing? Apparently not. One can change the look and feel without changing the appearance and behavior of a design.  The former can be subjective while the latter definitely guides.

To excel in design, one needs to differentiate the above as different design goals. And the understanding of perception comes in handy.

"Perception is one of the oldest fields in psychology. The oldest quantitative law in psychology is the Weber-Fechner law, which quantifies the relationship between the intensity of physical stimuli and their perceptual effects." (full article)

The following screen may look like a coloring book exercise, but it is the initial step of blending "appearances and behaviors" with "look and feel".

Following are some iterations of the same screen over the course of the design process...

Usability testing brings invaluable insight and feedback, and is always FUN!

Creating Wireframes

Gaming mouse can have as many as 9 buttons... Well, just to give you an idea of how our hands work nowadays. Many designers have probably abandoned their sketch books and do everything with their mouse and keyboard. Some may stick with pen and paper. Similarly, when it comes to wireframing a web/UX design....

1. Some prefer using computer tools like MockFlow, Axure, Balsamiq Mockups, Pencil Project, HotGloo, Mockingbird, Cacoo, ProtoShare, iPlotz, OmniGraffle etc.as listed in this article: 10 Excellent Tools for Creating Web Design Wireframes.

2. Some would just enjoy the freedom of sketching with pen and paper. Following are some sketches, by Jon Asbury, in one of his recent social app design project that made its way into the G20 summit:

Home Screen Design

Community Screen Design

Profile Screen Design

Search Screen Design

The design workforce is evolving

 Here is a very interesting article from 2007: The Cross-Discipline Design Imperative which examines the conventional design workforce and how it will or should evolve... In essence, "those who can marry creative right-brain thinking and analytical left-brain thinking are at a premium...".

Over the last decade, website design created a big demand for cross-discipline design. Web developers and graphic designers have to understand marketing goals while marketers have to understand what is feasible and what is not. But over time, titles like webmasters have disappeared. Web developers and web designers still exist but their job requirements are no longer exclusive. In the past 5 years or so, newer job titles like Information Architect (IA), User-experience designer (UX) start to appear. This is due to yet another wave, an increasing demand for web applications. Software engineers are pulled into the game. Since most of the design workforce are not really trained in a cross-discipline curriculum, the user-centered design methodology has been widely adopted and has proven capable of holding a cross-functional team together. Personas are difficult to design but easy to understand and share.

One way to get a feel of the job market is to do a search on certain job titles or check out career pages of corporate websites. Not only will these reveal what a company is doing or where it is heading, these also provide valuable information on new tools and skill-sets required for certain jobs. A great way for someone to plan a career path!