Question everything generally thought to be obvious - Dieter Rams

I think Google Chrome has one of the most elegant interfaces. When it was launched, I didn’t understand the need for another web browser. But as I started using the new browser, it changed me as user and as a designer.

It showed that minimal does not mean less functionality. It also showed the importance of focusing on content above all else. Even if it means eliminating or customizing standard OS elements like titlebar and scrollbar which take up precious real estate.

There are many innovative design details in Chrome, like the tab close behavior. I really like the Find in Page feature. It is the same text search feature that is found in almost any software that displays text. You would think that by now the feature would be perfected. Chrome has very elegant solution which is better than existing implementation. It also captures its design philosophy.

Position and size

Let us see how other browsers implement this feature. Firefox and Safari show the the ‘find bar’ as one row; the former at the top of the screen and latter at the bottom. Displaying the find bar at the top is better for readability. After typing the query the user can start scanning the page from top to bottom. Otherwise, nothing really interesting about them.

Since every piece of UI was questioned by the Chrome team, the find bar, appears in the top right corner taking only the amount of horizontal space it needs. Chrome’s find bar uses only icons for previous, next and close actions. The box is positioned in the top left corner. Since content flows from left to right (with exceptions), the left side is more important for legibility than the right side.

Chrome does not have Firefox’s Match case and Highlight all options, which helps it to trim fat. These options will be useful in some circumstance. But I don’t think they are necessary for the find feature in a web browser. Also they distract the user from the actual task.

Tracking matches

Even with its small foot print, Chrome’s find bar show the total number of search results and the position of the highlighted. Firefox and Safari in spite of taking the whole row don’t show this information.The text highlight moves automatically as the user types in the find box. The position of the current highlight amongst the total number of matches in shown right next to

The number of matching text will help  the user decide how much search string to type.

Scroll Bar

Scroll bars is one of the least useful UI controls, especially for the amount of screen real estate it takes. Unfortunately it is needed in a desktop UI with keyboard mouse interaction. Chrome has special scroll bar that has one more utility. It shows the location of the matching text in the page.

More than the usefulness of the feature, what I admire is that the feature does not take any more space. In fact it adds value to space that is otherwise wasted.

There are two ways to add legends to a pie chart. One method is to list each color and the name of the variable. This design has poor readability. The reader has to move back and forth between the pie chart and legend to read the chart.

A better design is to label each section in chart directly, obviating the need for a chart. This is definitely better to read. But the layout can be unpredictable. If the data is skewed then a lot of labels might overlap. For interaction designers, we don’t always know the data before hand. So using this type of chart will make the design unpredictable.

I think a simple bar chart is more effective than pie chart. A horizontal bar chart can be treated like a table. The data can be presented in an sorted order, which makes reading a more pleasant experience. Only one color is needed in the chart, which reduces unnecessary contrast.

An uxmatters.com Q&A on this topic suggests first trying to use just the noun. If that is not possible, then use first person voice (My Contacts) since it makes the experience more personal. Third person voice can also be used when the application has an instructional tone example like a learning software.

Show only the required details

Icons help users recognize a class of object. This AIGA icon for example can be instantly recognized as a bus. The icon does not show many details like rear view mirrors or grills. But they are not going to make the user recognizer the icon any faster. In fact it may increase the time to recognize since the user has to process more information. So once I selected the object to be used as an icon, reduce the object to its most basic elements. This reduced the amount of work I had to do.

Design icon in the size they will be used

I wanted icons at 16x16px. Our team a had purchased a library of vector icons, which could be scaled to any size. But when I reduced them to 16×16 px many details of the icons got distorted and the icons were not legible. So I created bitmap icons at 16x16px, either from a blank slate or retouching the vector icon at the required size. Vector icons don’t always get distorted, but I think there is a range of sizes beyond which a icon looks distorted.

Contrast across icons

It is important that icons are distinguishable from each other especially if icons are going to be shown next to each other. Otherwise the user would take longer time to recognize the icons, which defeats the whole purpose of icons. Whenever I have to design for contrast, I refer to Bertin’s retinal variables: Hue, Shape, Texture, Orientation, Size & Value.

Since all icons have to be similarly sized, I could not use size and position for showing contrast. But using only shape, hue, and orientation I could show sufficient contrast across the icons. I didn’t use texture, since it would be harder to perceive texture at small sizes and also it needs more illustrating skill.

Google’s icons are a good example of  icons having contrast across hue, shape and orientation. I like how the icons for Blogs and Realtime have the same shape, but different hue and orientation. It captures their conceptual similarity and differences beautifully.

1. Icon, or likeness: This is a sign that is a direct imitation of the concept. For example, photograph of a person’s face in a contacts list would be a icon. Similarly a graphic of the iPhone is technically an icon. In user interface the term icon is used instead of a more accurate term signs because when signs were first used in user interfaces they were all mostly icons. Early icons were imitation of a objects in office environment like document, folder, printer.

2. Index or indications: This is a sign that shows a symptom or evidence of a concept. For example, emoticons are an indication of emotions. While using index, designer has to make sure that the correlation between the index and the concept can be made by the user. Document and image editing programs use index signs (bold, right align) to represent the result of using a tool.

3. Symbols: This is a sign that becomes associated with the  concept by usage over time. Numbers and alphabets are the best examples of symbols. Icons and indices can become symbols over time by repeated usage. The floppy disk image is now commonly used to indicate save operation, although floppy disks are almost extinct.

It is not possible to represent any concept with a sign. Abstract concepts like Save as, Print preview that have no resemblance in real world are hard to represent visually. It is safer to use a symbol with a label to represent such operations.

Data analysis

Information overload is caused by lousy design. Humans process huge volumes of data everyday.
The challenge is presenting multivariate data on a two dimensional surface like paper or screen.
Finding causality is the goal of data analysis. Unlike physical world where the causality is constant, in the human world causality is impermanent. In fact we look for causality to do an intervention and break the causal chain.
Design should support data comparison. Spatial adjacency is better than temporal adjacency for data comparison.

Information presenters

Presenting information is an intellectual and ethical activity.
Do not cherry pick data.
Respect your audience.
Know your content.
Your presentation should support an unguided cognitive walk through.

Information Consumers

Check the sources of information used in presentation.
Evaluate the competency of the presenter.
Is the result too good to be true?
Have an open mind but not an empty head.

Design Principles

Use the resolution of typography. Content is the design. Don’t put boxes around everything.
Treat design as a research problem rather than a creative problem.
To find examples of good visualization read scientific journals like Nature.
In design 1+1=3 . If two design elements are put next to each other, an interaction effect is added to the effects of the two elements.

User Interface Design

1st generation of interfaces was command line based, like DOS. Involved remembering and typing
2nd generation interfaces – GUI using windows and icons. Involved clicking and pointing
3rd generation is likely to be touch base high resolution
Computers separate information by mode of production. Users have to go to different application  “rooms” to work on different modes of production
In recovery.gov ET set a goal of using 92% of screen space for content

Overall Tufte gave a lot of food for thought. He showed a lot of good design examples from Galileo’s recordings of the sun spots to a SARS virus outbreak. But all his examples were static content or structurally static (like weather forecast). He picked examples where the designer knows the content exactly. This works well for board room presentations and publishing. But while designing a web application the content or even the structure of the content is not known to the designer. In my current project, I am designing an web application that can be customized by banks for their business needs. So the design has to be flexible for a wide range of requirements. In other words, web designers have to design web applications before there is any content, ergo we have to treat content and design separately. My main takeaway from the workshop was his spirit of “whatever it takes”.

I am working on a product called RiskOrgins. This application will be used by banks to manage the loan origination process, and evaluate the risk involved in a loan. There is a lot of data within a financial company. But not all of that data is available in the front lines, where account managers are taking to customers. RiskOrigins will provide the process and data to identify the loan proposals that will benefit the bank. I like to think that RO will help banks avoid the next financial crisis by supplying risk information before issuing the loan.

As a designer, I am challenged with creating user interfaces to input the complex details of loan proposals, comparing different proposals along multiple dimensions and completing the loan approval process efficiently. One of the design activities I have been enjoying on this project is identifying user interface design patterns. There are few problems that appears in different parts of the application, like managing a collection of objects. This has helped me a lot and I’m planning  to write about my design patterns in future posts.

It is possible to download stencils from Graffletopia without leaving Omnigraffle. To download stencils within Omnigraffle, open the stencils window (shortcut: ⌘+0) and click on the triangle next to the lens icon and choose Graffletopia. Now you can search for stencils as you would on Graffletopia website. Click on the search results and select install to download the stencil.

This design pattern of installing addons/extensions within the host application is becoming standard. During the early days Firefox for example, users had to visit Firefox addons website to find extensions, download the file and install them. Now users can install addons within Firefox itself. Other browsers like Google Chrome also do the same.

Do you have any OmniGraffle tips? Share them by adding your comments below.

Highlights

Methods applied: User Interviews, Requirement Specification, Task Flow, Prototyping, and Web Analytics

Team: 5 Developers and 1 Designer

Overview video:

SourceForge Downloads is an update to the most important feature on SourceForge for the business and the open source community. It provides an interface for open source developers to upload and organize files. Open source software users can download these files from SourceForge.net or the project’s website. The service provides Download Statistics to track the number of downloads over time, geographic location of the downloaders, and the operating system of the users.

Responsibilities
Working with five developers and one other designer, I led the design efforts of the file manager, the download statistics visualization, and the integration with the rest of the site. I designed user interface elements, wrote the product specifications, and evaluated the work of the developers to make sure it met the specifications. I worked closely with the developers to communicate and clarify product requirements.

Process

Open source developers were the target users of the product, as they are the creators of open-source content. I conducted user interviews with these target users to better understand their needs. I also conducted an competitive analysis of competing services to understand the market landscape. Analyzing all the research data provided a clear direction for me to lead the product design.

Collaborating with another designer, I iterated over many prototypes moving from paper sketches to low fidelity mockups. Finally I combined the style guide and the low fidelity mockups to create final prototypes.

I closed worked with developers day-to-day combining user-centered design and agile programming methodologies. To help the engineering process, I prioritized the product requirements and evaluated the implementation.

Final Design

From my manager

“Mouly’s work at Geeknet has shown his abilities through a number of different areas. His initial work focusing around purely user research and engagement helped us set clear metrics for success around the launch of new websites within the company but the combination of that with his recommendations around user-centered design work helped carry that work forward. As the work that the company was focusing was evolved, Mouly also lead the charge around one of the three primary initiatives within SourceForge.net itself, focused on the Download Product. In that work, Mouly was able to bring together his talents around researching what both users and developers were looking for on a product-level while also harmonizing between a new interface and legacy interface — which having had to do so myself is no mean feat. The end result was the launch of new system that serves millions of people on a monthly basis and an interface that is one of the primary entry points into SourceForge.net.” – Jeffrey Bates, Vice President of Product, Geeknet