10%

Try : Insurtech, Application Development

Edtech(5)

Events(31)

Interviews(10)

Life@mantra(10)

Logistics(1)

Strategy(14)

Testing(7)

Android(43)

Backend(28)

Dev Ops(2)

Enterprise Solution(20)

Frontend(28)

iOS(39)

Javascript(13)

AI in Insurance(26)

Insurtech(57)

Product Innovation(34)

Solutions(13)

Augmented Reality(7)

Customer Journey(7)

Design(6)

User Experience(21)

Artificial Intelligence(95)

Bitcoin(7)

Blockchain(14)

Cognitive Computing(7)

Computer Vision(6)

Data Science(14)

FinTech(41)

Intelligent Automation(25)

Machine Learning(43)

Natural Language Processing(10)

E-health(2)

HealthTech(5)

mHealth(3)

Telehealth Care(1)

10 Most Important Interaction Design Principles

7 minutes, 7 seconds read

The process of interaction design involves studying the behavior and structure of interactive systems and implementing them for developing useful digital products. In other words, interaction design is the relationship between user and product and the services they use.

The purpose of interaction design is to create a great user experience. That’s why most of the UI disciplines require understanding and hands-on experience of interaction design principles. After all, it’s about designing for the entire interconnected system: the device, interface, context, environment, and people. Interaction designers strive to create meaningful relationships between people and the products and services they use. It may include computers, mobile devices, gadgets, appliances, and more.

It is important to understand ux design best practices while developing complex web and mobile applications. These are the key elements that product designers should not neglect while creating an interface for the user. 

The 10 most important interaction design principles are-

  1. UX: Match user experience and expectations
  2. Consistent design: Maintain consistency throughout the application
  3. Functionality: Follow functional minimalism
  4. Cognition: Reduce cognitive loads/mental pressure to understand the application
  5. Engagement: Design interactively such that it keeps the user engaged.
  6. User control: Allow the user to control, trust, and explore
  7. Perceivability: Invite interactions through intuitions and interactive media
  8. Learnability: Make user interactions easy to learn and remember
  9. Error handling: Take care to prevent errors, if they occur make sure to detect and recover them.
  10. Affordability: Simulate actions by taking inspiration from usual and physical world interactions.

10 Important Interaction Design Principles

#1 Match user experience and expectations

By matching the sequence of steps, layout of information, and terminology used with the expectation and prior experiences of the users, designers can reduce the friction and discomfort of learning a new system.

You can match your audience’s prior experiences and expectations by using common conventions or UI patterns, for example, Hitee Chatbot.

#2 Consistency

Along with matching people’s expectations through terminology, layout, and interactions, the design should be consistent throughout the process and between related applications. 

By maintaining consistency, you are helping users learn more quickly. You can re-apply their prior experiences from one part of an application to another to maintain consistency throughout the design. Design consistency is also an aid to intuitive interfaces.

Bonus – you can use the inconsistencies to indicate to users where things might not work the way they expect. Breaking consistency is similar to knowing when to be unconventional.

#3 Functional minimalism

“Everything should be made as simple as possible, but no simpler.” 

Albert Einstein

The range of possible actions should be no more than is absolutely necessary. Providing too many options will detract the primary function and reduce usability by overwhelming the user with choices. To achieve the Zen of functional minimalism, you should-

  1. Avoid unnecessary features and functions
  2. Break complex tasks into manageable sub-tasks
  3. Limit functions rather than the user experience.
Key elements of interaction design

#4 Cognitive loads

Cognition refers to the “process of thoughts.” A good user interactive design minimizes the user’s “effort to think” to complete a task. Another way to put this is that a good assistant uses his skills to help the master focus on his skills.

For instance, while designing an interactive interface, we need to understand how much concentration a task requires to complete it. Accordingly, you can design the UI that reduces the cognitive load as much as possible. 

Here’s a technique to reduce users’ “thinking work.” Focus on what the computer is good at and build a system that utilizes its abilities to the fullest. Remember, computers are good at-

  • Maths
  • Remembering things
  • Keeping track of things
  • Comparing things
  • Spell Checking and spotting/correcting errors

The point is – by knowing the attributes of users and products, one can create a design for a better user experience.

#5 Engagement

In terms of user experience, engagement is the measure of the extent to which the user has a positive experience with your product. An engaging experience is not only enjoyable but also easier and productive. Engagement is subjective to the system. I.e. your design must engage with the desired audience. For instance, what appeals to teenagers might be irrelevant to their grandparents. Apart from aligning your design for the appropriate audience, achieving and creating control is the key.

The interaction design principles state that users should always feel like they’re in control of the experience. They must constantly experience a sense of achievement through positive feedback/results or feel like they’ve created something.

In his book “Flow,” Mihaly Csikszentmihalyi describes a state of optimal experience where people are so engaged in the activity that the rest of the world falls away. Flow is what we’re looking to achieve through engaging interactions. We should allow users to concentrate on their work and not on the user interface. In short, stay out of the way!

#6 Control, trust, and explorability

Good interaction design should incorporate control, trust, and explorability to any system. If users feel in control of the process, they’ll be more comfortable using the system. If the user is comfortable and in control, they’ll trust the system and believe that the application will prevent them from making an unrecoverable error or from feeling stupid. Trust inspires confidence and with confidence, the user is free to explore further. Intuitive interfaces are extremely good at stimulating users to navigate and explore the app.

#7 Perceivability

People are aware of the opportunity to interact with interactive media. As interface designers, we must avoid developing hidden interactions, which decrease the usability, efficiency, and user experiences. In other words, people should not have to guess or look for opportunities to interact.

When developing interactive media, users should have the ability to review an interface and identify where they can interact. We must remember that not everyone experiences and interacts with interface in the same way others do. In the process of interaction design, make it a habit to provide hints and indicators like buttons, icons, textures, textiles, etc. Let the user see that these visual cues can be clicked or tapped with their fingers. Always consider the usability and accessibility of the interactive media and how the user sees and perceives the objects in the interface.

How users perceive the opportunity to interact with a digital media

#8 Learnability

Another important interaction design principle is inducing the ability to learn to use the interface easily. In other words, users should be able to learn to use the interface in the first attempt and should not face issues using it again. Please note that engaging interfaces allow users to easily learn and remember the interactions.

Even though simple interfaces may require a certain amount of experience to learn, learnability makes interaction intuitive. People tend to interact with an interface similar to other interfaces. This is the reason why we must understand the process of interaction design thoroughly and the importance of design patterns and consistency. 

Intuitive interface design allows users to learn to use the interface without much effort and gives them a sense of achievement. They feel smart and capable of grasping and utilizing newer interfaces. In a nutshell, product designers should let the user feel confident while navigating through the interface.

#9 Error prevention, detection, and recovery

The best way to reduce the number of errors a user makes is to anticipate possible mistakes and prevent them from happening in the first place. If the errors are unavoidable, we need to make them easy to spot and help the user to recover from them quickly and without unnecessary friction.

Error prevention techniques-

  • Disabling functions that aren’t relevant to the user
  • Using appropriate controls to constrain inputs (e.g. radio buttons, dropdowns, etc.)
  • Providing clear instructions and preemptive help
  • As a last resort, provide clear warning messages.

How to handle application errors through design?

Anticipate possible errors and provide feedback that helps users verify that-

  1. They’ve done what they intended to do.
  2. What they intended to do was correct.

Please note that providing feedback by changing the visuals of the object is more noticeable than a written message.

Error recovery techniques – 

If the error is unavoidable, provide direction to the user to recover from it. For example, you can provide “back,” “undo,” or “cancel” buttons.

If a specific action is irreversible, you should flag it “critical” and make the user confirm first to prevent slip-ups. Alternatively, you can create a system that naturally defaults to a less harmful state. For example, closing a document without saving it should be intelligent enough to know the unlikely behavior of the user. It can either auto-save or display a warning.

The spectrum of user interface : interaction design principles

#10 Affordance

Affordance is the quality of an object that allows an individual to perform an action. For example, a standard household light switch appears innately clickable. 

The point is – users should get a clue about how to use an abject through its physical appearance. While designing user interfaces, you can achieve affordance either by simulating ‘physical world’ affordances (e.g. buttons or switches) or keeping consistency with web standards and interface design elements (e.g. underlined links or default button styles). The thing is, in an intuitive interface, users are able to navigate and use the functionalities of the application without any formal training.

Interaction design is not always about creating a better interface for the users; it is also about using technology in the way people want. It is necessary to know the target users to design a desirable product for them. Interactive design is the basis for the success of any product. These 10 interaction design principles are based on the study and experiences of our team in designing mobile and web apps for a broad product portfolio and on multiple mobile and web platforms.

Drop us a word at hello@mantralabsglobal.com to learn more about our interaction design projects and services.

Cancel

Knowledge thats worth delivered in your inbox

Tabular Data Extraction from Invoice Documents

5 minutes, 12 seconds read

The task of extracting information from tables is a long-running problem statement in the world of machine learning and image processing. Although the latest accomplishments in the field of deep learning have seen a lot of success, tabular data extraction still remains a challenge due to the vast amount of ways in which tables are represented both visually and structurally. Below are some of the examples: 

Fig. 1

Fig. 2

Fig. 3

Fig. 4

Fig. 5

Invoice Documents

Many companies process their bills in the form of invoices which contain tables that hold information about the items along with their prices and quantities. This information is generally required to be stored in databases while these invoices get processed.

Traditionally, this information is required to be hand filled into a database software however, this approach has some drawbacks:

1. The whole process is time consuming.

2. Certain errors might get induced during the data entry process.

3. Extra cost of manual data entry.

 An invoice automation system can be deployed to address these shortcomings. The idea is to upload the invoice document and the system will read and generate the tabular information in the digital format making the whole process faster and more cost-effective for companies.

Fig. 6

Fig. 6 shows a sample invoice that contains some regular invoice details such as Invoice No, Invoice Date, Company details, and two tables holding transaction information. Now, our goal is to extract the information present in the two tables.

Tabular Information

The problem of extracting tables from invoices can be condensed into 2 main subtasks.

1. Table Detection

2. Tabular Structure Extraction.

 What is Table Detection?

 Table Detection is the process of identifying and locating tables that are present in a document, usually an image. There are multiple ways to detect tables in an image. Some of the approaches make use of image processing toolkits like OpenCV while some of the other approaches use statistical models on features extracted from the documents such as Text Position and Text Characteristics. Recently more deep learning approaches have been used to detect tables using trained neural networks similar to the ones used in Object Detection.

What is Table Structure Extraction?

Table Structure Extraction is the process of extracting the tabular information once the boundaries of the table are detected through Table Detection. The information within the rows and columns is then extracted and transferred to the desired format, usually CSV or Excel file.

Table Detection using Faster RCNN

Faster RCNN is a neural network model that comes from the RCNN family. It is the successor of Fast RCNN created by Ross Girshick in 2015. The name Faster RCNN is to signify an improvement over the previous model both in terms of training speed and detection speed. 

To read more about the model framework, one can access the paper Faster R-CNN: Towards Real-Time Object Detection with Region Proposal Networks.

 There are many other object detection model architectures that are available for use today. Each model comes with certain advantages and disadvantages in terms of prediction accuracy, model parameter size, inference speed, etc.

For the task of detecting tables in invoice documents, we will select the Faster RCNN model with FPN(Feature Pyramid Network) as a feature extraction network. The model is pre-trained on the ImageNet corpus using ResNET 101 architecture. The ImageNet corpus is a public dataset that consists of more than 20,000 image categories of everyday objects.  We will therefore make use of a Pytorch framework to train and test the model.

The above mentioned model gives us a fast inference time and a high Mean Average Precision. It is preferred for cases where a quick real time detection is desired.

First, the model is to be trained using public datasets for Table Detection such as Marmot and UNLV datasets. Next, we further fine-tune the model with our custom labeled dataset. For the purpose of labeling, we will follow the COCO annotation format.

Once trained, the model displayed an accuracy close to 86% on our custom dataset. There are certain scenarios where the model fails to locate the tables such as cases containing watermarks and/or overlapping texts. Tables without borders are also missed in a few instances. However, the model has shown its ability to learn from examples and detect tables in multiple different invoice documents. 

Fig. 7

After running inference on the sample invoice from Fig 6, we can see two table boundaries being detected by the model in Fig 7. The first table gets detected with 100% accuracy and the second table is detected with 99% accuracy.

Table Structure Extraction

Once the boundaries of the table are detected by the model, an OCR (Optical Character Reader) mechanism is used to extract the text within the boundaries. The text is then processed using the information that is part of a unique table.

We were able to extract the correct structure of the table, including its headers and line items using logics derived from the invoices. The difficulty of this process depends on the type of invoice format at hand.

There are multiple challenges that one may encounter while building an algorithm to extract structure. Some of them are:

  1. The span of some table columns may overlap making it difficult to determine the boundaries between columns.
  2. The fonts and sizes present within tables may vary from one table to another. The algorithm should be able to accomodate for this variation.
  3. The tables might get split into two pages and detecting the continuation of a table might be challenging.

Certain deep learning approaches have also been published recently to determine the structure of a table. However, training them on custom datasets still remains a challenge. 

Fig 8

The final result is then stored in a CSV file and can be edited or stored according to one’s convenience as shown in Fig 8 which displays the first table information.

Conclusion

The deep learning approach to extracting information from structured documents is a step in the right direction. With high accuracy and low running time, the systems can only learn to perform better with more data. The recent and upcoming advancements in computer vision approaches have made processes such as invoice automation significantly accessible and robust.

About the author:

Prateek Sethi is a Data Scientist working at Mantra Labs. His work involves leveraging Artificial Intelligence to create data-driven solutions. Apart from his work he takes a keen interest in football and exploring the outdoors.

Further Reading:

Cancel

Knowledge thats worth delivered in your inbox

Loading More Posts ...
Go Top
bot

May i help you?

bot shadow

Our Website is
Best Experienced on
Chrome & Safari

safari icon