Hollow Icon vs. Solid Icon Which Is More Friendly for Recognizing

In UI design, what scenario should hollow icons and solid icons be applied to? Some believe that the hollow icons are visually more complex than the solid icons, while the solid icons are in fact more recognizable.

The opinions of designers on this topic varies. Some designers think that the hollow icons is made by lines, as a result of which, they are more difficult to recognize. However, they gives users a feeling of ease and exquisiteness. Others deem that the recognizability has nothing to do with this topic, but depends on the shape, color and other factors of the icon.

1. The function of icons.

First, this topic focuses on a specific type of icons: functional icon. Let’s take a look at the basic functions of this type of icons.

Functional icons are common in life, usually seen in the airport, stations, hotels, shopping malls and other large public places, providing guidance to people, as shown below:

In UI design, icons are one of the most common elements. The use of the icon originated in the Macintosh 1.0, even in the earlier Xerox graphical interface began. They are often given functions like action, description and so on.

Since the release of the smart phone system so far, the style of graphical interface has completed the transformation from the material design to the flat design evolution. With the introduction of ios7, almost all of the icons in Apps are becoming more and more flat and slim. The reason of it is that the over-eye-catching icons usually reduce the readability of the contents.

In general, the most basic function of the icons is to convey the information quickly.

In today's design work, the matching of icons and texts has reached a point of obsession. In fact, it is enough to express some abstract concepts with text. Putting an icon aside actually helps nothing about making users build connections between the icon and its function.

Nevertheless, icons are still relatively important. The function of icons is far more than “telling users the meaning on the first sight”. In addition, there are also many important features like immediate locating, content layer distinguishing and interface rhythm increasing.

Take a prototype example on Mockplus for example, if you just see the icons without the texts, the meaning of them is quite obscure. However, the functions of icons are more than that. The icons in the prototype is solid. The icons and the text together form a unity, in which the icons plays a role of alignment. If you remove the icons, the information in the list will be indistinguishable and there will be a visual confusion. Users will face more difficulty when focusing on the options on a line.

2. Are solid icons more recognizable?

Given that you were summoned by the call of nature and rushed into the big mall to find the rest room. Solid icons or hollow icons? Which can be recognized more quickly?

Solid icons are indeed more recognizable in the perspective of visual attraction. The following picture shows the influence of the elements that are attractive to the human eye (sorted from left to right):

Hollow icons attract the eye by their shapes while the solid ones do the same by their color. As a result, hollow icons are more difficult to recognize.

As early as the iOS7 system was introduced, there have been some discussion about this topic. Curt Arledge, an experienced designer who graduated from Viget, wrote an APP specifically, and did 1260 recognition tests for solid and hollow icons [1], look at the test results:

The results found that the difference of the speed of recognizing these two types of icons is just 0.1 seconds.

In the first group, the solid icons won. These icons are derived from life, the icons kept their original meanings. The recognition speed depends on how much the color and shape attract the eyes. So the solid icons are easier to recognize.

It is worth noting that the three hollow icons are more recognizable in the second group.

These three icons are abstracted from subjects in real life, among which the speech bubble does not exists at all. Designers create this icon in the graphical interface and endow it with a meaning; The forms of garbage bin and keys are various in life, so the icons of them are abstract summaries of them. In this case, the shape of the icons allows users to quickly identify the meaning of the icons, while the colors has become a factor of interference.

So, for icons expressing the same meaning of the original subjects, solid icons are more recognizable. For icons that endowed with abstract meanings, hollow icons are better.

How to Conduct Usability Easily & Quickly

In the field of product design, there’s no denying that usability testing is one of the best ways to improve your products, but the user researchers who conduct usability testing are never enough.To enable our colleagues in all departments to carry out research & testing in an efficient way, we’ve made some easy-to-understand documents & tutorials, including this article on usability testing.

One thing should be noted that the testing methods introduced in this article are simple & informal with small sample and an objective of discovering serious problems. If you need a further understanding of testing principles & methods, the following books are for your reference

Handbook of Usability Testing

Usability Testing and Research

Measuring the User Experience

Before we get started, I would like to inform you that the earlier you make the usability testing, the better. And you could make the testing with only some simple facilities.

1.What is usability testing?

Actually, usability testing is not complicated to understand. Simply speaking, it means observing people using the product. To be more specific, it can be defined that solving the usability problems through observing representative users and completing typical tasks, which aims to make the product easier to use.

2.How to plan and conduct a usability testing?

According to the definition above, we are going to figure out the following questions in this part:

1)     How to design the testing task?
2)     How to find your users?
3)     How to conduct the testing?
4)     How to find out usability problems by analyzing data collected?

How to design the testing task?

Designing the testing task is the core of the preliminary work in usability testing. The standard of recruiting the users should be made after you finishing designing the usability testing process as the task involved in this testing is directly related to users’ operation experience. Once we clarify the former, the next step would be clear, too.

Before making a plan for your testing, ask yourself these questions:

“Does my plan actually reflect the real goals of users (not what I personally think users would like to do)?”

After asking yourself this question more than 3 times and finally finding the right answers, you could start to design your testing.

Here are some common methods:

A)Firstly, make a to-do list and describe the tasks involved in the testing with simple & short sentences and some usability question examples. This is for those colleagues of this project. Since it’s a quick testing, the tasks should be not so many, but crucial, central and those you considerederror-prone.

B)After choosing the important tasks, you should switch the task to a scene which means the content of what are you going to tell or show to your users. It is necessary to take the users’ goals and motivations into consideration, because your functions of the product are not important for users, what really matters is their targets and the process of achieving targets. At this time, you can ask yourself that question above.

C)Determine the requirements of these tasks, such as, if you need a new account or if it is necessary to prepare the documents and so on.

D)Pre-testing. Pre-testing is mainly to find out some problems of your plan, you can ask your colleagues to help you complete it quickly at their lunch time.

How to find users?

Before you find users by making use of various resources, you should clarify that what kind of users you need.

What kind of people do you need?

Previously, in the testing plan stage, when we communicate with the colleagues in product/design apartment,They always use terms like “age of 25-30”, “office workers”, etc. But in fact, we are mostly concerned about the behaviors of the users, so, when we decide the standards of choosing the users, we should be concerned about the experience and behavior of using the product, rather than demographic characteristics. To get more details of this topic, you can read this article about recruiting participants.

How many users do you need?

When it comes to how many users do we need in the testing, you have to look at this classic chart of Nielsen, though it is debated that whether five users are enough or not in this field. However, in practice, as long as you can find the appropriate person in the first stage , five users are enough to find some significant usability problems. Of course, here I would like to emphasize again that the purpose of quick testing is to find serious problems rather than all problems.

In addition, we also find that when product and design staffs are observing the first three users, they would always focus on it and make records quickly. However, when it turns to the fifth or more, new information would be less, which result in these researchers get bored or even fall asleep (like the rabbit in this chart). Therefore, testing users within 5 members would make researchers concentrate on the testing and more likely to observe and listen to the ideas of users.

How to find users?

After identifying the criteria and the number of users, it’s time to consider “How to find your users ?”. Since it is a quick testing, so I suggest you try to exhaust all means, no matter you look for colleagues, friends, friends of friends, or use website advertising, etc. As long as you can finish your testing fast and follow the requirements of the testing, you can choose any means you want. By the way, having a usual list of users would be better.

How to conduct usability testing

As it is a quick testing, the role of the host would change from user researcher to the designer or product staff. Therefore, I have to emphasize that when you are doing the testing, do not try to teach users how to use the product as well as promote the your product to the user.

Tips: things being tested can be your product or the prototype of product (especially for software).

When you test the usability of a prototype, it’s important to simulate the usage scenario. If the product is used on a mobile end, it should be test on a mobile end, so you should make sure the prototype tool you used have the capability of sharing across devices. Some fast prototyping tools like Mockplus enable users to view a project on your Pad or phone by scanning the QR code or entering project code, etc. which greatly facilitate the testing. Except for Mockplus, Axure share has similar sharing functions.

What does the recorder do?

No matter it is a real-time observation (with special experience rooms or usability testing tools), or it needs to look back to observe by videos, you should notice that the key point of your records are not what the user said, but how do they use your product. Remember, what did they do in the testing is more important than what did they say. Well, since this testing is made to find out some serious problems that are always obvious, you are supposed to record these problems without discussing the solutions to them, because these solutions proposed by you or the users are not the best sometimes. You can consider this issue quietly or discuss it with your colleagues later.

How to find out usability problems by analyzing data?

After completing the testing, moderators and observers need to quickly sort out the useful information with their fresh memories by using stickers, a whiteboard or creating a document to record these problems. In short, you should quickly write down their operations and the problems they raised or you found. However, you are not supposed to make any conclusion immediately. 
After all the testing has been done and all stickers, lists have been collected, you could find out the most serious problems and fix them quickly. In this session, the key point is to make sure that which questions are most important and can be repaired quickly. Only in this way the testing results are executable, not just a list of archived issues. 

Julie Zhu

7 Online courses for learning Usability, User Experience and Interaction design

Learning is ever going process. It doesn't matter what you are professional or student, for updating your skill and knowledge you would require learning on regular basis. Field of Design (Usability, UX Design and Interaction design) is spreading across world with a rapid speed. Companies have started understanding importance of Usability and User Experience. There are lots of good material like blogs, articles and books and courses available online. If you are enthusiastic about Usability and User Experience then these courses will be very helpful for you to start.

Online courses

Remarks: Good for starting and understanding basics

Remarks: Special lectures from Don Norman on ‘Usability’.

Remarks: There are many useful courses in this portal.

Remarks: Basics of User Experience

Remarks:  Advanced User Experience and Gamification.

You can also find some amazing listing of graphic design course in OnlineCourseReview. 

Author: Abhishek Jain (Twitter @UxdAbhi)

Why Startups Need a Styleguide

Even for a seasoned designer, creating a new styleguide for a given product is hard—there are a lot of possible design directions, and the process can quickly become overwhelming. Startup life is hectic, fast, and filled with clichés such as “perfect is the enemy of done,” “move fast and break things,” or “launch it now, fix it later.”
Coming up with a styleguide under such slogans and fluctuating priorities is challenging, but a must if a product’s design is to succeed in the long run.
BBC UX design system, styleguide, and component library
The Global Experience Language, (GEL) from the BBC 
explains the purpose of each component and how they 
should be used.

In recent years, we’ve heard a lot about design systems, styleguides, pattern libraries, and atomic design. While these tools are very useful, using them can seem like overkill when you only want to create a few screens for an MVP or to demo an app. However, having a styleguide will not only improve your design process in general, but will make your app more solid and consistent.
Let’s first talk about the main benefits of a styleguide, and then touch upon the challenging startup environment. Finally, we’ll discuss how a styleguide is always evolving as a living document.

Top Five Reasons Why a Styleguide Is a Good Idea

1. A Styleguide Makes Designs Concrete and Branding Clear

As a lone designer at a startup—which is often the case—there aren’t many opportunities to review and challenge design decisions made by others on the team. Although everyone might be working in collaboration, designs are not necessarily shared with others. This means there is only one person validating final designs.
A styleguide will provide a startup with guidance and documentation for reference. It will challenge some of the design choices made by the designer or the team because they’ll have to be validated in the global context of the app. Designing a UI component because it works well on one screen will not cut it. A well thought-out design should solve a single design problem in one situation, as well as a pervasive problem that is found on other screens of your app.
Repeated components in a UI deserve to be in a styleguide.

This app's UI design uses the "contact" tile repeatedly, a prime 
candidate to be included as a component in the styleguide. 
(by Ivan Bjelajac on Dribbble)
A styleguide makes the overall design style, brand guidelines, specifications, and rules available to everyone at your company. It’s only a click away. They can go to a URL to easily access an online styleguide or download a PDF. Design becomes everyone’s job—it is no longer the sole responsibility of the design team. It’s a prudent approach that will improve your product’s user interface.
IBM design language guide on the web

IBM hosts their "design language" guide online which makes it easy
for everyone, even the public, to view it.

2. A Styleguide Makes Your Design More Consistent

It provides a dictionary of sorts for your UI design language. You can use the same terminology when you want to communicate something you’ve already expressed. Imagine if we had slightly different words to express the same thing:
  1. “It’s raining; I need my umbrella.”
  2. “It’s raining, I need my umbrellol”
  3. “It’s raining, I need my umbrellala “
It may make a language poetic, but hard to understand. Fundamentally, it’s the same idea with the UI of a site or an app. For ease of use, you should only invent a new “word” when you’re really creating something new. This way, you’re bound by a strict rule that says, “Only components which solve a design problem repeatedly throughout the product are allowed into the product and subsequently the styleguide.”
Consistency makes your product more user-friendly; a highly usable product can translate into more engagement and sales.
App onboarding screens
Onboarding screens often use animations or visual effects that 
are not present in the rest of the application. It gives designers 
a good opportunity to create a new layout.
(by Murat Gursoy on Dribbble).

3. Reusing the Same System Components Makes Your App Easier to Use

As in the language example, consistency is key. Once each component is understood by the user, when used again in a different context, people will already be familiar with its behavior. When it comes to user interactions, this consistency improves the overall usability of the product.
Eventbrite's user interface reuses common components.
Eventbrite uses a three-icon layout in a lot of its sections. When a user comes across these components again, they are already familiar with their general behavior.

Working with a component-based design system saves money and also makes a product easier to update. If there’s a usability issue with a component in a certain situation, it can be fixed once and all the other potential issues with that component will also be updated.

4. A Styleguide Makes Your App Faster to Develop in the Long Run

When your team is developing a common component for a screen, they’re developing a solution that they will also be using elsewhere. This saves development time—a lot of it. When your company scales, this could mean saving as much as 10x the man hours required to build a new screen.

5. A Styleguide Facilitates Production Efficiencies and Innovation

Creating a styleguide makes designs more accessible and readily available to the rest of the company. Developers and designers can prototype an idea faster and more easily. Bootstrap is often praised for making it easy for developers to create a working prototype—your styleguide serves the same purpose. It provides a reference foundation for a new UI that will be built by developers, without the design team having to create the screen first (even though the design team should QA the final screens).
Shopify's design system styleguide
The Challenges of a Startup, a Styleguide in Flux
Creating a design system in a startup environment is not as linear as it might be at a more mature company where they’re used to a more streamlined process. At a more traditional company, the design team performs UX research, ideation, and experimentation, and then comes up with the final brand styleguide. This process does not suit all companies. Startups work in an environment where their vision and the requirements for the product are always in flux. They work with MVPs (minimum viable products), incomplete versions of their apps that are used to test their idea and show its potential to users.
When it comes to creating a styleguide, this can become an issue.
In an environment that’s always evolving, a designer is usually struggling to create a styleguide that’s supposed to be somewhat ‘fixed.’ A designer might not have the time to thoroughly think through all of the components being created, even though they might still end up in the next release of the app. Facebook famously swapped their hamburger menu for a tab navigation when they matured a bit. Do you think whoever put the hamburger menu there in the first place also added it to Facebook styleguide?
You might even consider that it’s not yet time to create a styleguide. You may realize that in the long term you’re going to need one, but right now it’s more important to crank out screens for the app’s usability testing. What’s more, you’ll also need some marketing pages to promote your app. Suddenly, your design needs to ramp up, and as you’re creating screens, you begin to see the value of having a styleguide that can keep your designs and the company brand consistent.
The problem is that you don’t know exactly when it’s the right time to trade flexibility for stability. You have to decide when you should start the styleguide and when you should just focus on creating screens. An optimal approach may be to produce a styleguide at the same time you’re delivering screens—this way you may be able to have the best of both worlds.

Start with Some UI Inspiration

A good way to start, especially if you’re not a designer, is to collect examples of design styles you like, or more importantly, what you think users will respond to. Collect as many examples as possible, and put them in a folder/InVision board/Niice board/etc. They can be used as reference and inspiration along with your design sensibility. You can build on them later to create a pattern library.
For instance, when I was working on a styleguide for a company promoting artists in the entertainment industry, we wondered whether light or dark backgrounds would have a greater impact on our users. I looked at hundreds of different websites in games/movies/visual production to see how they used dark and light backgrounds.
Star Wars Battlefront 2 game website color-scheme styleguide

The Star Wars Battlefront 2 game website uses darker colors while the EA website uses a lighter color scheme.
I made a reference sheet where I highlighted the most common patterns. One pattern I identified was that companies in that industry tended to use darker backgrounds when presenting their products, but used white backgrounds in their marketing efforts, eCommerce, and shops.
You don’t have to go as deep as that, but I found having visual references helps, not only in creating a styleguide, but also in remembering some of the use cases you might need to design for. Once you feel good about the references you collected, you can start working on the visual design.

Various mood boards that use different references.
(sources: Summer Teal Simpson HitchVivek VenkatramanAmber on Dribbble)

Design Solid UI Components

While working at startups, it’s harder to create components than it is to create pages—at least at the beginning. When you design a page, you often have an idea of how it’s going to be used. That’s not necessarily the case when you design a component. You’re trying to design for a specific use case, but you want it to be part of a universal design system, and you need to approach it that way. For instance, you may want to create a sub-navigation component with three buttons. You may also need it to work with four, five, or ten buttons, and it will need to work on mobile, tablet and desktop. You need to think ahead.
Styleguide for Operator, an eCommerce company
The Operator styleguide specifies how each of their components react based on navigation and visual hierarchy. (source: Kerem Suer on Dribbble)
You want a certain level of persistence or staying power in a component. Common components shouldn’t change often, and they must be reusable in many places throughout your product. For example, if you’re only interested in an iOS app, then you want to test your component based on the number of options or the length of the content, not necessarily the screen size. The idea is that if it’s viable in the UI in many places in your app, then you know it’s a component that has the potential to be part of your styleguide.
Salesforce design system with common components and their use

The Salesforce Lightning Design System indicates how flexible a component is and whether or not it can be adapted to a mobile interface.
A startup needs to start from practically nothing and then move quickly. Your boss might want a screen designed by the end of the day. That means you can’t really develop an entire styleguide and then come up with the screen. Even worse, you might be designing a styleguide with components that will never see the light of day because the vision of the company has changed. Like they say, it’s better to ship now.
Salesforce analytics UI kit component library

The Salesforce Analytics UI Kit is a library of common components that are supposed to be reused in each app. (source: Eli Sebastian Brumbaugh)
Creating a great styleguide takes time, and because it will become the foundation of your design system, you want to get it right. In a startup environment, you need to work on your styleguide with everything in tandem.

The Styleguide as a Living Document

You should think about your styleguide as a work in progress. Like a startup figuring out its strategy, you’re going to figure out your styleguide as you go along. You’ll edit it and adjust it over time until it becomes the foundation of your UI. One useful approach is to start the first mockup at the same time you start your styleguide. Open two files with your favorite software (in my case, Sketch); one called page name and the other one styleguide. As you’re working on your screen design, you can start seeding your styleguide with the elements that make up your design.
Working on a styleguide simultaneously in Sketch

A startup project example with two files opened. The styleguide on the left and the mobile screen on the right.
As you start doing more of these, you’ll notice early on that there some components are prime candidates for inclusion in the styleguide. For instance, if you’ve settled on an icon style, then all of your icons can go into the styleguide right from the start.
I usually create a section called ‘icons done so far.’ If at one point someone needs an icon, they first have to check through this section before creating a new one.
Icon libraries in styleguides and common component libraries

SalesforceYelp and Mapbox all have extensive icon libraries for their app. Your styleguide should also contain UI elements that are used throughout.

Other obvious items to consider are colors, buttons, selectors, titles, headers, body text, etc. If you’re using a style especially for marketing, you can consider putting it in your styleguide and labeling it appropriately. It’s okay if you’re not completely settled on a particular item. You can refine the UI elements in your design system later when the opportunity arises, and update the guide appropriately. Don’t forget, the styleguide is a living document, especially at a startup.
Web form elements in the styleguide
Eventually, when I start putting layouts in the guide, I know that I’m beginning to reach a point where all components should be close to their final state. This part marks the tipping point in the styleguide creation process—now you can celebrate! A good way to celebrate such a milestone is to create a logo or icon (consider naming it) for the 1.0 version of the styleguide.
Some people go as far as printing the logo/icon as a sticker so the team has a sort of trophy. That’s also the point where I usually go back to the more traditional way of working with the guide by opening that styleguide first, and then creating a new file for whatever interface needs to be done.


As a designer, by creating a styleguide as early as possible, you’re making sure that your startup adheres to a higher standard of quality. It may be challenging, but it’s well worth the effort. A solid, well-rounded styleguide is not only going to help you have a better product, it will also help you reduce the cost of development.
There is a way to make it happen even in a fast-paced environment where quick decisions are made and sometimes designs need to change rapidly. Hopefully, the process described above will help designers at any startup cope with the challenges of complexity and speed while also creating a sturdy styleguide for the benefit of the product.