Design Thinking - the Core Value System that leads to the ultimate, futuristic, and holistically optimized organizational growth

 As per popular notion, to a layman, the word design refers to aesthetics. And why not? For several years we have known the Versaces, Jimmy Choos, and Channels of the world to be spoken together with the word - design. The supreme quality and state of the art craft of the products and services of these brands defined a laudable experience for their customers.

Imbibing design thinking as a culture in the corporates is way beyond crafting a shoe or a handbag. Nevertheless, it is about making 'state-of-the-art' a 'normal' across all layers within an organization.

What is Design Thinking Culture?

Design thinking culture is getting habitual into a system - a set of values, code of conduct, ways to respond to a problem or opportunities in a way that helps to optimize the output across all verticals in an organization. These organizational habits are inducted into the core value system of an organization.

Design thinking impacts every touchpoint of an organization - inside-out. It helps to get the best outcome in customer experience, employee satisfaction and profits.

How does a team respond to a given situation with mindful observation and empathy? What innovative solution do they come up with? And how do they optimize the solution?

Holistically maximized outcomes every time with each endeavour comes from a strong intent to appreciate design. Then it involves the skill set and resources to conform to the same.

The best example of design thinking that the world looks up to is Apple. Design thinking does not just reflect on their product, but it percolates to each layer of the organization. There is a 'Wow' factor that the brand creates at every touchpoint. And it is attributed to people that Apple hires.

How to embrace design?

A design thinking process takes time to be completely inducted into the mindset of the organization. It starts with getting the people who appreciate design. They should be ready to embrace the design thinking practices and culture of the organization. They should be given the freedom to experiment and innovate to the extent that even failures should be allowed.

There have been several examples where companies have failed only because they refused to innovate. A recent article published in McKinsey -'Nine keys to becoming a future-ready company' emphasizes the need to take bold decisions. As per the article, the top 30 companies in the survey are taking bold decisions across nine key organizational imperatives that include - purpose, value, culture, structure, decision making, talent, ecosystems and learning.

Hence' freedom to innovate and tolerance to small failure should be imbibed into the company's culture. It will help to optimize possibilities of growth in the long run.

Why should you adopt design thinking?

Now the question comes to mind - what is new about these practices? Businesses have always tried to do their best to serve the customers. And there have been some really good products in the industry that the world looks up to even today.

Mercedes, Rolls-Royce, Walt Disney and several such time tested brands prove that great products and brands existed before the concept of design thinking came into prominence. So what were the gaps in the traditional business practices that design thinking culture is able to fill?

Perhaps, the answer to that lies in the fact that the competition was less. At present, most companies are struggling to differentiate their products in the market. Further, the way technology has become an integral part of businesses, has majorly impacted the way interactions happen between colleagues, or with customers.

Several years ago, getting a landline connection used to be a tedious process. The same is said about booking an Ambassador car. These were perhaps the best examples of product-oriented businesses. Of course, the industry has come a long way since then. And the approach continually evolved towards being customer centric.

In this regard, the only differentiation that design thinking brings to the table is empathy and an intent to create a 'Wow' effect at every touchpoint and interaction. Design thinking does not differentiate between a colleague, a customer, investor or any other business associate. It only emphasizes creating an incredible experience all across and for everyone.

So what happens when you write an email to your client by applying design thinking? - They want to sign up with you as soon as possible because they believe that you truly understand their problem and will solve it for them.

What happens when you hand over some tasks to your colleague in the same manner? - It brings a smile to their face and they look forward to working with you. It improves the working environment.

What happens when you take the same approach in dealing with your customers? - They not only come back to you, but they also recommend you to others.

Design thinking has brought 'one-to-one experience' to the core of interactions in business. And this is the real superpower of business teams that practice design thinking.

How design thinking has impacted brands?

Let's take the example of Tesla's cube truck. Who designs an electric cyber track with 400-600 km mileage when fully charged, 14,000 pounds towing capacity, on-board power inverters, autopilot, and a bullet-proof 30X cold-rolled stainless steel body just to grab attention?

Elon Musk invested in this model just to see how people from all over the world react to it and channelise the insights to develop future products. Going forward, their sedans were far more superior than all other automobile brands. It set a benchmark in terms of the range, affordability, and pick up as compared to other electric cars.

Tesla's design thinking process helped them to create headlines as they pitched the idea and then led the insights to bring about unmatched innovation. And in all this, the one core quest they had was - to add value to their customers.

Disney applied the design thinking approach when they created the VR character of Doc. McStuffins in a Children's Hospital in Los Angeles. They empathised with kids and tried to reduce their stress and boredom while sitting in the hospital's waiting rooms.

Disney created this character with several other stuffed toy animals to keep the kids happily engaged and stress-free.

How is Design Thinking practised?

So far, we have discussed how the culture of design thinking impacts the overall work culture and helps companies to scale up unprecedented growth. Now, we will see how design thinking is practised?

Empathy - Empathy helps to identify an improvement opportunity. It helps you to keep the needs of the user of your product at the centre.

For that, you have to identify and define their real problems. In the above example, Tesla pitched an aspirational product that felt like prayers being answered for the users of an electric truck. And Disney understood the anxiety and stress of kids sitting in the waiting room of a hospital and tried to get rid of that by engaging them with something enjoyable. Success was guaranteed in both cases as it gave the users more than what they could even think of as a solution to their problems.

Cognitive paths/ destinations - The word cognition refers to the perception, or mental impulse of a person through thoughts, observation, and experiences. Design thinking teaches you to use cognitive strategies to approach one particular situation in all possible ways. How?

By understanding human psychology and behaviour. Any interaction/product/service that is human-centred has to have deep knowledge about the human mind and how it influences their decisions/actions. It helps you to understand their problems better and also indicates their propensity to react negatively or positively to a given solution.

Creative thinking - There could be several starting points with the same or even diverse destinations. It is all about keeping your mind open to possibilities and trying to find an alternative opening for every roadblock that comes in the way. Creative thinking helps you to achieve that.

Collaborative Processes - It involves involving other people and brainstorming together for the best possible outcome of your creative initiative/endeavour/product.

Together you can come up with unique and innovative solutions for the problems. It also helps to iterate and explore the scope of the product or optimize the solution.

Thus, a continual process of implementing design thinking practices helps to improve the performance of an organization in a holistic manner. The intent to make state-of-the-art at every attempt and get a 'Wow' reaction from everyone your work interacts with - is sure to make you the only 'go-to' in your domain.

In a nutshell…

Embrace design thinking, provide freedom for innovation and space for failures. Apply design thinking approach through empathetic observation, realizing and deeply understanding a problem/opportunity. Use this understanding to come up with innovative solutions. Continue the same approach to keep optimizing the solution.

Need we say more on why you must embrace design NOW?

The 7 factors that influence user experience

In 2004 Peter Morville, an information architect, created a 7-facet honeycomb to guide those concerned with user experience. Governments, Fortune 500 companies, website codes, and more strive to respect their guidelines.

Every organization strives to improve the overall product experience and delivers quality service to meet customer satisfaction. On the other hand, they use a variety of techniques to improve user experience.

There are 7 factors that define the user experience, according to Peter Morville a pioneer in the UX field who wrote several of UX’s best-selling books:

• Useful
• Usable
• Findable
• Credible
• Desirable
• Accessible
• Valuable

Let’s take a look at each specialty and what it means for general user information:

Useful

it simply means that Your content should be fresh and clear to fulfill the need.

Product usability increases or falls through the quality of its design. If the product does not work for someone why would you want to bring it to market?

It is noteworthy that “useful” catches the eye of the beholder and objects can be considered “useful” if they bring non-functional benefits such as pleasing or pleasing beauty.

When you make products that the consumer does not use, they may experience negative effects. So, make sure you bring useful products to customers in a great way.

Good designers often plan how they can make their work seem useful to users. One of the most useful things will be reviews, which show users the right information about products.

Usable

The website should be easy to use and users should be able to achieve their goal effectively, efficiently, and intuitively.

Usability is concerned with enabling users to successfully use their products effectively and efficiently.

Assume you have added an active feature to your website or app, but if it is not usable, it will ruin the user experience.

Designers should make sure that all the features and options included are easy to use. It has never been a good idea to give your users half-done work.

For a website to be useful it must provide objectives for the target audience that is usable. Communication should not require much thought or effort, as it is well-planned and accurate. When it comes to websites, 94% of consumers want an easy-to-use one.

Findable

Availability leads to the notion that a product should be straightforward to find and in the case of digital and information products. If you cannot find a product, you will not purchase it and that is true for all possible users.

It is important to display the necessary information to the relevant users in a convenient way.

the acquisition factor is very important for all businesses. It is best to advertise your product in newspapers, websites, social media platforms, and many other platforms that are only possible for advertisement.

Consider a simple example; if you have picked up a newspaper and all the stories in it are given in a page layout, rather than categorized by categories such as Sports, Entertainment, business, politics, research, etc. You may find reading the newspaper very annoying. 

The more steps you need to take to do something, the more your user feels harassed. 

Availability is important to the user experience(UX) of various products.

Credible

Credible refers to the consumer’s capability to trust your product and the services you provide that is the users should trust and believe what they are being told.

Without trust, consumers will not buy any products or services from you.

Making your products more reliable joins customer testimonials on your website to provide your particular product or service.

In the past, Toyota has faced many recollections over the years.

According to Edmunds.com, “More than 34 million vehicles in the United States and millions more worldwide are involved in Takata Airbag recalls, which took place in 2014.”

Toyota has blundered and not made a reliable product which is why they have made it even harder to trust their products.

Of the nearly 250,000 products introduced each year in the U.S., 85-95% fail due to users’ lack of trust in the product, regardless of their quality. 

It is almost impossible to bring the user experience if the user thinks that the originator of the product is false, anointed with malicious intent.

Randall Terry said; “I have cheated you once, I have been ashamed of you. I cheated twice, I was embarrassed. ”Today’s users will not give you a second chance to cheat – there are many options in almost every field to choose a reliable product provider.

Desirable

Desirable means that your website or app is used and apprised by the person who found it the best done. The most widely trusted commodities have the most desirable feature of the product, the design, its use, and cost.

A good user experience leaves a good impression of your website or app to its users.

The attraction is conveyed to product design, image, identity, beauty, and emotional design. 

Desirable value is measured when you return with satisfied customers who play an important role in growing your business by spreading news of your product and telling how much they were satisfied by that.

Therefore, it is important to increase your product value which can lead to better user experience.

For the most desirable product, it is possible for the user to be proud of it and create a desire for other users.

It simply means using an image, brand, product type, and other design elements to evoke emotion and appreciation for your product.

Accessible

Information intended for everyone should be accessible to everyone. In fact, content needs to be available to people with disabilities also.

The more user-friendly your site is, regardless of age or ability, the more effective it will be. 

One of the most easily accessible opportunities in app development and website development is to embrace UX-enhancing features for those with visual impairments.

It is about providing an experience that is not available to full-time users – this includes those with disabilities such as hearing loss, blurred vision, impaired mobility or impaired function.

Accessibility is often seen by companies as a waste of money because of the idea that people with inabilities make up a small fraction of the population. But think that if 1 in 4 people in your audience will not be able to use your product only because it is not available for them then 25% of your total market will be lost by you.

It is also important to remember accessibility when you design a product.

Do not ignore access to the user experience. Unlocking an accessible user experience also shows that you care about everyone and that will help you to elevate your brand reputation.

Valuable

The product must bring the value of the business it affects to the user who purchases or uses it. Without value, it is possible that any initial product extension will eventually be limited.

The value of a design can be measured by the price of problem-solving solutions. Nothing works like a less expensive design to solve the problem of expensive costs.

Whenever you bring a product or service, make sure it delivers the best results that add value to your product. 

The product should not affect the usefulness of your company and customers over time. Lack of value can damage your business reputation.

In addition, you can improve the user experience or value factor by providing opportunities for customers to express their feedback on your website through reviews.

To sum up things, we have observed seven factors that play a key role in determining the performance of user experience. Adopt these seven factors and improve your product user experience successfully.

Product success depends on Useful, Usable, Findable, Credible, Desirable, Accessible, Valuable.

Having these 7 features in the products is likely to be successful in the market place.

Accessibility and Interface design

We should take accessibility more seriously. 

One billion people, or 15% of the world’s population, experience some form of disability, and disability prevalence is higher for developing countries. One-fifth of the estimated global total, or between 110 million and 190 million people, experience significant disabilities. (Source - World Bank Group) 

In 2019 in France, disabled people were estimated at 12 millions with 1,5 millions suffering from vision Impairment and 850 000 from physical disability. The rest of the disabilities are related to hearing, mental or intellectual disability as well as autism and other minor disabilities.

Also, the number of disabilities is expected to rise with time as younger generations age and are prone to visual and hearing impairment due to excessive use of screens and earphones.

Simply put, people with disabilities are a user base that is as valuable for every business as any user bases. Seeing these numbers, we are talking about millions of unaddressed users that could use your services and products.

Taking accessibility more seriously in your product and service design could allow any business to grow its user base right now but also adapt to a certain future where these needs will be even more in demand.

What are the different disabilities and their needs?

Today we can observe five types of disabilities that need to have their needs addressed digitally:

• Vision Impairment, Deaf or hard of hearing, Autism spectrum disorder and Physical & Learning disability 
• 
  
• Each of these disabilities have different sets of needs but most of these needs can be addressed the same way. Let's go over these needs and how to address them!
• 
  
• NB: This post does not take into consideration the needs of other disabilities that are not listed here.

---

Vision impairment & its needs:

Vision impairment concerns people who suffer from total blindness to people who simply wear glasses. However, some people have severe vision impairment (low vision, astigmatism, cataracts…) that despite corrective glasses or surgery aren't able to read small text or identify small details unless enlarged.

Vision impairment also concerns people with colourblindness.

Today a few websites provide some tools to assist people with visual disabilities:

• Text enlargement tool:

This tool allows people to enlarge the text in order to read more easily small text. However, if your website contains a lot of information, enlarging the text will completely disturb the structure of your website and thus render your UX useless. ( see example below) This text enlargement is even more disturbing on mobile…

In order to avoid using this type of tool, there are some alternatives such as using bigger typography size (at least 19px) as well as a font that has sharp and spaced letters (Verdana and Arial are good examples.)

• Tools for testing your website to be colourblindness compliant:

Regarding colourblindness, it is best to avoid clear text & elements and work on contrast. There is a lot of website where you can test your colour palette and visualise how a colourblind person will see it.

You can use toptal for example to test your website renders depending on colourblindness types! There are also other tools to test unique colors, you can find out more here.

• Voice over tool:

This is an interesting tool for people with reduced vision and total blindness. It consist of a button on a website page to activate a voice over that will read or describe whatever that person will hover on. However, so far, I haven't found a good example on a website that uses that feature correctly. All I could find was an indicator that we can listen to a website content, but this feature didn't work properly.

However, I recently discovered Apple's VoiceOver for IOS and I was impressed by everything it could do! You can learn more about it here: Apple VoiceOver (OS X) .

I find this tool incredible however some of its use requires third party objects such as refreshable braille table for people who want to read normally instead of listening. (Let's not forget people who are deaf & blind at the same time!)

However I wonder, why is this app not an API? This way every website & app on every device would be fully equipped!

• Full content personalisation filters tool:

This is a unique case so far, wasn't able to find another example but a certain website implemented an incredible filters tool to allow various profiles of vison impairment to personalise the website to their needs! You can check it out here: jobinlive.com (see images bellow to find the filters).

To sum it up, vision impairment is the hardest disability to provide for, but with the advances of voiceover technologies as well as speech controls, providing for these needs will be easier than ever.

---

Deaf & Hard of hearing & its needs:

This is one of the easiest disability to provide for:

• If your website has music, provide a way to signal the user that the website has music as well as an option to turn it off or modify the volume. Today, Google chrome already indicate that sound is coming from a specific page by placing a speaker icon on the website's tab in the navigator.
• Always provide subtitles on your videos! I cannot stress this enough, but there are still many businesses who overlook the importance of subtitles. Also, subtitles doesn't only serve deaf or hard of hearing people but also people with normal hearing who need to view the video in public spaces and don't have earphones! Many business missed a lot of opportunities to retain users by lacking subtitles on their product's video presentation.
• Provide multiple ways to contact the client service. Many client services today are only reachable by phone and some of them have really long response time regarding emails. Please train your client service to respond faster to emails or provide a live chat or video chat fit for people with hearing disabilities. Another alternative is to have a super detailed FAQ page with a lot of answers for many possible questions.

---

Autism spectrum disorder & its needs:

Like deaf people, people on the autism spectrum are quite easy to design for:

• Avoid web pages that are too cluttered with elements. Many people with autism have heightened sensory awareness and can be distracted by crowded pages. In this case you should prioritise white spaces.
• People with autism also tend to prefer consistency and dependability,including web pages with a predictable layout and navigation.
• The text should be as simple as possible, while providing definitions for any non-standard terms, such as idioms, jargon, and abbreviations and acronyms. Correct grammar and spelling are important. People with autism can fixate on things they don't understand or loose concentration.
• Users should have as much control as possible over the site’s behaviour. Avoid time limits on content or automatic refreshes whenever possible. Provide clear instructions and error messages when filling out forms.

For more information you can consult this site.

---

Physical disability & its needs:

People with physical disabilities requires mainly gesture accommodations on digital products & services.

• Large "tap-able" areas ( CTAs buttons, search bars, tabs etc…), since their motor skills are limited and it requires more effort to aim small targets, it is best to enlarge the most important interactions.
• Prioritise most important content first to avoid long scrolling or swiping. Some people use another part of their bodies to scroll (a foot, an elbow, chin, mouth with tactile pen…) to scroll or swipe on their device. Long scrolling could be tiring especially if that person use her chin. Also, provide a way to adjust scrolling sensitivity.
• Find better alternatives than drop downs to enter informations on forms. While drop-downs are a good way to enter information by taping on the screens, they often requires long scrolling (when you enter your birth date or birth year for example). There are better alternative such as a full calendar. You can refer to this site for more examples: www.fuckdropdowns.com
• Prioritise step by step tunnels / processes. By doing so, you reduce scrolling and prioritise taping. for example for subscriptions forms. Doing so, allows to use larger CTAs buttons and raise the possibility to introduce more white spaces.

Learning disabilities & its needs:

This might surprise you, but Dyslexia is considered a "Learning disability"and not a "visual impairment"! This is due to the source of dyslexia coming from the way our brain analyses text.

For dyslexic people, there is a particular font that allows them to read with ease. This is the only need this disability has. However the hardest part is to implement it seamlessly on your product. So far the best example i found was with job in live preference filters (mentioned above).

However sometimes, larger fonts allow them to read easily but this is not always the case and requires training.

---

How to design for everyone the same experience?

To me, addressing accessibility on digital products isn't necessarily cramming all possible tools and accommodation on your digital interface! But finding a middle ground that could suit more than half the different profiles as well as adding an option in the footer for profiles that need more personalisation (similar to job in live) .

Here is a list of "must have" on any digital products to meet more than the average accessibility standards and the disabilities who will be affected by these changes:

• Larger texts ( Vision impairments, autism, dyslexia)
• Larger CTAs (Physical disability, vision impairments)
• Step by step tunnel ( Physical disability)
• Subtitles (Deafness, Autism)
• Sound indicators & controls (Deaf, Autism)
• More White spaces ( Vision impairments, autism, dyslexia, physical)
• Usage of sharp & spaced lettering ( Vision impairments, Autism, Dyslexia)
• Client service Chat or Detailed FAQ ( Deafness, Autism)

You can also check a small UI exercice for the 100 days UI challenge I did where I redesigned the sign up page of an organisation that aims to provide jobs for people with disabilities by taking into considerations all their needs : Friendly sign up page for people with disabilities.

As you can see, designing for multiple types of disability isn't that hard and requires only a little of your attention during the usability testing of your product! Test it with disabled people if you can or refer to this guide!

However, this article addresses only a portion of digital accommodation while there is still a lot to be done especially in gaming, AR & new products that requires specific interactions but nothing is impossible!

Principles of Design

1. Simplicity

   Simplicity is easily to quote but often ignored in strange ways. Perhaps this is because it is the eye of the beholder.
   
   A language which uses fewer basic elements to achieve the same power is simpler.
   
   Sometimes simplicity is confused with 'easy to understand". For example, a two-line solution which uses recursion is a pretty simple, even though some people might find it easier to work though a 10-line solution which avoids recursion.
   
   In XML, "Processing Instructions", those things which start with "

2. Modular Design

   When you design a system, or a language, then if the features can be broken into relatively loosely bound groups of relatively closely bound features, then that division is a good thing to be made a part of the design. This is just good engineering. It means that when you want to change the system, you can with luck in the future change only one part, which will only require you to understand (and test) that part. This will allow other people to independently change other parts at the same time. This is just classic good software design and books have been written about it. The corollary, the TOII is less frequently met.
   
   Modular design hinges on the simplicity and abstract nature of the interface definition between the modules. A design in which the insides of each module need to know all about each other is not a modular design but an arbitrary partitioning of the bits.

3. Being part of a Modular Design

   Its is not only necessary to make sure your own system is designed to be made of modular parts. It is also necessary to realize that your own system, no matter how big and wonderful it seems now, should always be designed to be a part of another larger system.
   
   This is often much more difficult than modularity.

4. Tolerance

   Be liberal in what you require but conservative in what you do.
   
   This is the expression of a principle which applies pretty well in life, (it is a typical UU tenet), and is commonly employed in design across the Internet.
   
   Write HTML 4.0-strict. Accept HTML-4.0-Transitional (a superset of strict).
   
   This principle can be contentious. When browsers are lax about what they expect, the system works better but also it encourages laxness on the part of web page writers. The principle of tolerance does not blunt the need for a perfectly clear protocol specification which draws a precise distinction between a conformance and non-conformance. The principle of tolerance is no excuse for a product which contravenes a standard.

5. Decentralization

   This is a principle of the design of distributed systems, including societies. It points out that any single common point which is involved in any operation tends to limit the way the system scales, and produce a single point of complete failure.
   
   Centralization in social systems can apply to concepts, too. For example, if we make a knowledge representation system which requires anyone who uses the concept of "automobile" to use the term "http://www.kr.org/stds/industry/automobile" then we restrict the set of uses of the system to those for whom this particular formulation of what an automobile is works. The Semantic Web must avoid such conceptual bottlenecks just as the Internet avoids such network bottlenecks.

6. Test of Independent Invention

   If someone else had already invented your system, would theirs work with yours?
   
   Does this system have to be the only one of its kind? This simple thought test is described in more detail in "Evolution" in these Design Issues. It is connected to modularity inside-out, designing a system not to be modular in itself, but to be a part of an as-yet unspecified larger system. A critical property here is that the system tries to do one thing well, and leaves other things to other modules. It also has to avoid conceptual or other centralization, as no two modules can claim the need to be the unique center of a larger system.

7. Principle of Least Power

   In choosing computer languages, there are classes of program which range from the plainly descriptive (such as Dublin Core metadata, or the content of most databases, or HTML) though logical languages of limited power (such as access control lists, or conneg content negotiation) which include limited propositional logic, though declarative languages which verge on the Turing Complete (Postscript is, but PDF isn't, I am told) through those which are in fact Turing Complete though one is led not to use them that way (XSLT, SQL) to those which are unashamedly procedural (Java, C).
   
   The choice of language is a common design choice. The low power end of the scale is typically simpler to design, implement and use, but the high power end of the scale has all the attraction of being an open-ended hook into which anything can be placed, a door to users bounded only by the imagination of the programmer.
   
   Computer Science in the 1960s to 80s spent a lot of effort making languages which were as powerful as possible. Nowadays we have to appreciate the reasons for picking not the most powerful solution but the least powerful. The reason for this is that the less powerful the language, the more you can do with the data stored in that language. If you write it in a simple declarative form, anyone can write a program to analyze it in many ways. The Semantic Web is an attempt, largely, to map large quantities of existing data onto a common language so that the data can be analyzed in ways never dreamed of by its creators. If, for example, a web page with weather data has RDF describing that data, a user can retrieve it as a table, perhaps average it, plot it, deduce things from it in combination with other information. At the other end of the scale is the weather information portrayed by the cunning Java applet. While this might allow a very cool user interface, it cannot be analyzed at all. The search engine finding the page will have no idea of what the data is or what it is about. This the only way to find out what a Java applet means is to set it running in front of a person.
   
   I hope that is a good enough explanation of this principle. There are millions of examples of the choice. I chose HTML not to be a programming language because I wanted different programs to do different things with it, present it differently, extract tables of contents, index it, and so on.

The Ten Principles of Interaction Design

1. Equitable: Be welcoming.

2. Flexible: Provide options.

3. Straightforward: Be obvious and not ambiguous.

4. Perceptible: Don’t assume anything.

5. Informative: Be timely, predictable, uncomplicated and precise.

6. Preventative: Provide easy to follow instructions and gently guide users.

7. Tolerant: Handle errors respectfully.

8. Effortless: Don’t make demands or place restrictions on your users.

9. Accommodating: Be approachable, uncluttered and give people room to manoeuvre.

10. Consistent: Follow standards, guidelines, conventions and best practices.

Icon Hollow vs. Solid

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 at 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.