UI UX Blog

Information Design - An Introduction

By definition: “Information design is the skill and practice of preparing information so people can use it with efficiency and effectiveness.” To put simply, information design is a solution to a problem, built using text, images, video, graphs and other available data – that’s it.

Logic says we cannot have a solution unless some problem exists. Thus our solution, the information design must be an answer to some pre-known problem - or there would be no reason for it to exist. So what is the problem for which information design is needed? What is its nature? What is its scale? Is it important and worthwhile to solve?

The Problem Statements

If I do not understand the nature and scale of the problem first, I can never estimate nature and scale of the solution which I am going to build. Therefore the important thing to do here is explore and understand the problem in as much detail as possible.

The “problems” can be categorized as:

User Centric Problems: Website visitors are always hungry and looking for piece of information to satisfy them.

• • So what are users looking for …?
  • What is their gender and age group …?
  • What kind of content would they require: text, images, videos, presentations …?
  • What level of detail they require: definitions, research work, critique …?
  • How can we satisfy their objectives …?
  • You’ve got the idea

And / OR

Business Centric Problems: Businesses exist to sell product and services They need to sell products and services to satisfy their existence.

• • What is its business approach …?
  • Who are its potential customers …?
  • What is their gender and age group …?
  • What kind of content would they require: text, images, videos, presentations …?
  • What is its level of competition …?
  • In what ways it is special from the rest …?
  • You’ve got the idea

These are vague questions but they are still good to have an idea of problems for which Information Design becomes a “solution”. But in order to grasp more, let’s have a look at some real-life problem.

Some Real Life Problem Scenarios

• A retail store in Malaysia is looking to sell branded shoes to school children; particularly girls. The store had a walk-in store in a renowned area which is now being demolished in 3 months. As an interim arrangement, the store wants to serve its customers through its website.
• A canvas printing in Germany is looking to sell visual portraits of spectrograms of user’s voice through its website. Voice samples will be uploaded to website and an automated application will convert those audio files into spectrographic portraits and then allowing users to preview them and modify them. Users should also be able to customize them with text, colors, QR Codes and different canvas/frame options.

Thus Information design will never be the first step in designing the user experience, if it ever exists, it would have to exist at number two and will always come later after the problem statement is established.

Content Requirements

Since we know the problem statement now, are we ready to solve that? Logically speaking yes, but technically speaking – not yet.

• At this point, our problem line is clear (that’s good)
• and we are in position to solve it (even better)
• But - we lack an important understanding at this point that is: what data is available in hand and how much can be produced when required. (Hmm)

Therefore before we start laying down our solution, we must be clear about our liberties and restrictions. So as part of content requirements, we must have a clear understanding of

• What data is available in hand
• What data can be produced if required

Both understandings serve one common objective and that is: to use text, diagrams, images and related data to carve solutions which satisfy user/business requirements and – on the top of it, give a satisfaction to the user that he has learned and understood well.

Wireframes and Mockups

Let’s discuss how our learning would converge and transform into a practical solution. A simple approach to materialize our information design would be to build wireframes.

Wireframes

Wireframes are simple sketches on paper that show how website would appear in terms of “information display” or “information design”. Wireframes are carved to understand the space, the navigation and the structure of a website. Wireframes are simple in structure, just like floor plan of a building and are designed to understand how various website elements would appear, how much space and attention they would take and how a user would move from one point t another.

For example, wireframe of a typical website would include a logo, a main navigation, sub navigation, presentation area, content display area, reference and related content area, areas for user interaction (login, signup, password recovery), areas for social collaboration (social medias, Facebook, Twiter etc), website footer and privacy/copyright notices.

Now the successful information design would state how much information will be put in which area, what supportive images, videos, graphics would be available t, how to move user from one information segment to another, how to give feedback and how to bring user to a point where he are either satisfied or in position to make a purchase decision.

Website Mockups

Website mockups are models of a website (mostly screenshots or paper-clippings) used to get feedback from the users, owner and other team members working on the project. Mockups are easy to build and inexpensive to modify, thus multiple mockups could be built to discuss design and various presentation approaches.

There are several digital mockup tools available which help you create digital mockups with ease. Balsamiq, Pencil are great tool to get started.

Interaction Design

Interaction design is designing the human-computer interface, the elements in website with which user communicates with data and receives feedback. Let’s simplify that definition a little bit more.

User Interaction design for websites is called Navigation Design but it’s not merely that. Interaction design explains how user will “talk” to some web-element and how website will talk back. Take example of home-page sliders, carousels, menus, navigation buttons, popup windows, links, JavaScript widgets and other elements which facilitate user to move between various website sections.

Let’s take a step back to Information Design and try to understand how Interaction design is built upon it.

In the example of SoundMall, the spectrographic printing service, it was decided to have one presentation area on the top of Homepage with 4 slides in it with following information

Slide – 1: Engage visitor’s attention with a gorgeous image and also suggest this is something creative designed “for special people and from special people”

Slide – 2: Convey that in the form of gift, how exciting this would be and where it could be used

Slide – 3: Convey how easy it is to get started

Slide – 4: Induce visitors to take further action by giving them a discount value and by telling them that it is for limited time only.

Information design went on explain what will be the total number of slides and what will be content on them. Now interaction design defines how these slides will share the available space and how user will be able to move between them. That means on the basis of same information design, interaction designer can produce multiple views, multiple ways to navigate between them and to manipulate them.

Interaction design in general is a broad terminology which is not limited to just navigation design. Also user interaction with web-applications is not limited to widgets, pop-ups and standard input controls (like keyboard, muse, ThinkPad and Joysticks etc.) but it is broadening with the invention new hardware and emerging technologies like touch-screens, motion controllers, eye-motion sensors controls and more human-computer interaction devices being available.

Visual Design

We have taken such a long way to reach the good old term which used to define everything only a decade back, the good web-designing. With the passage of time, various efforts which were once part of “Website Designing” were identified separately and were taken out form the domain of website designer. User Experience Designers, Information Architects, Copyrighters and Interaction Designers have taken their share of effort leaving “Website Designing” to just “Visual Designing”. But I would be injust if I termed Visual Designing as “just Visual Designing” because it is the over-skin which makes and breaks the final layer of User Experience Design.

Visual Designing, as the definition goes, means the use of visual design elements (images, graphics, text and traditional art elements) on top of Interaction Design (Navigation Design) to make the design pleasant, to control eye-movement, to inspire, to induce and to highlight the most and least valuable information sections of website.

A Visual designer has several objectives to meet and all of them are equally important and worthwhile for the user experience. These elements suggest

• Visual Design should be Balanced
• It should be in harmony
• It should control eye-movement, to attract, to inspire and
• It should attract, inform and make user react. (Information Design and Navigation Design are also important and play their due role in making that happen)
• It should have variety
• It should be pleasant
• It should have an element of surprise
• It should leave a lasting impression on the user’s mind
• It should be engaging
• It should be 100 more things.. and yes all has to be there J

I personally feel information design and interaction design has taken lots of burden of Visual Design elements but it’s still the visual design which is most significant player in delivering results. Its just like recalling how Eiffel Tower looks like, we only think of its color, its size, its shape and what is represents, overlooking that it is a master piece of engineering, master piece of metallurgical sciences and results of 100s of engineers and craftsmen who worked on it for years to make it happen. They say a picture is worth a thousand words. For a website and it’s the visual design that makes the ‘image’ which says those 1000 words on behalf of everybody who worked on the project and made it successful.