It is an old saying- “A picture speaks a thousand words”. But not everyone can understand that language. So to make a design understandable we use code for designing.Code takes the design more near to the real product functionally/behaviorally. As in terms of professional language for a customer-“Interface is the product”. So the interface need to be interactive. And for a better interactivity a designer should design a functional layout. And to make those functional layouts functioning we use code, combination of -Markup language(HTML, XML etc.), Styling language(CSS, LESS, SASS), Scripting language(Javascript, jQuery, AJAX etc.).
There are lots of experiments, inventions that are done to give more life to designs, the mockups are now no longer used or are not enough to satisfy the customer to sell a product. No matter how much strength you put to design a beautiful template, unless it is interactive, even a group of static layouts can’t tell the whole product story. I am saying this because our interface now became more device independent, transitional and alive like a real product.
If we think of a human body, then design is skin and interface are bones, which gives shape to skin and gives it a meaningful body structure.
Let’s stop talking shit and let me show how code do magical designing…
Suppose we have a layout for which our client wants that, it should be viewed properly on all browser supportive devices. So, here comes the magic of code and we will code it once and it will work on all devices automatically. Let’s see how:
Just copy all the code and paste in a text editor and save it as, lets say test.html. And test it on browsers (advanced browsers).
There is a lot more stuff, like a new term which has evolved now a days is “RAPID PROTOTYPING“. It is something we do after design and before we start working on interface designing. The need of this is to demonstrate 20% of the actual product which users use 80% in the product most of the time.
Any machine learning algorithm requires some training data. In training data we have values for all features for all historical records. Consider this simple data set
Height Weight Age Class
165 70 22 Male
160 58 22 Female
In this data set we have three features for each record (Height, Weight and Age).
Any algorithm takes into account all the features to be able to learn and predict. However all the features of the data set may not be relevant.
Suppose we have 1000 features in a large training data set, using all features may exhaust all the system memory and computational power. So we must choose most relevant features and transform them according the the input required to algorithm. After this process we may find that only 100 of 1000 features are contributing to labels.
We can prepare training data by following two techniques
Feature Extraction
Feature Selection
Feature Extraction
Feature extraction is the process of extracting important, non-redundant features from raw data. Suppose you have 5 text documents. Suppose there are 10 important words that are present in all 5 document. Then these 10 words may not be contributing in deciding the labels for those documents. We can omit these words and create new features excluding those words.
TF-IDF technique
TF-IDF technique is a feature extraction technique based on frequency of features in documents
Suppose there is set of documents D(d1, d2, d3)
TF(t,d) is term frequency = frequency of a term/feature value t in document d.
IDF(t,d,D) is inverse document frequency of term t for document d in set D. Here N is the number of documents N = |D|.
TF(t,d) x IDF(t,d,D) is a measure based of which we can say that term ‘t’ is important in document ‘d’. The words for which this measure is really low, we can omit those words in features.
Feature Selection
Feature selection process tries to get most important features that are contributing to decide the label.
Chi Square Test
Chi Square test is a test that tests feature’s independence from class/label and then select ‘k’ features that depend most on class.
Example
Suppose there are some people living in four neighborhoods A, B, C and D and they are labelled as White Collar, or Blue Collar or no Collar
Chi Square test may determine that 90 people living in neighbourhood A are living by chance and not because they are White collar. Chi Square test depends on probabilities.
Chi Square is calculated by below formula for a feature.
Where O values are observed and E are expected.
In the above example, expected values for neighbourhood A for each class can be calculated as
E(A,White Collar) = (150/650) * 349
E(A,Blue Collar) = (150/650) * 151
E(A,No Collar) = (150/650) * 150
After Chi Square has been calculated, its closest value is located in below table for probability in the degree of freedom row.
In the above example for neighbourhood A the chi Square is equal to 2 (rounded off) and degree of freedom here are (no of rows – 1) x (no of columns – 1) = 6
We get 2.20 in 6th row that is most close to 2, it gives us p = 0.9.
This means there is a 90% chance that deviation between expected and observed is due to chance only.
So we can conclude that labelling doesn’t really depend on neighbourhood A.
On the other hand if p values come to 0.01, it means there is only 1% probability that deviation is due to chance, most of the deviation is due to other factors. In this case we can not really ignore Neighbourhood A in our predictive modelling and it has to be selected.
Use of internet is increasing day by day. According to a Survey in 2014, 40% of the population of the world is using internet. According to Cisco, in next five years the Global internet traffic is expected to increase thrice and hence it is important to give user a better user experience on the web to be in the competition. Animation is one of the method we can achieve that.
Now the question arises why animation?
Animation or interactivity helps to attract user’s attention, it helps to narrate the product story and yes it is also fun looking at those transitional effects.
“By offloading interpretation of changes to the perceptual system animation allows the user to continue thinking about the task domain, with no need to shift contexts to the interface domain. By eliminating sudden visual changes, animation lessens the chances the user is surprised.” Scott e.Hudson and john T.Stasko(1993).
But animation is quite difficult on web in respect to other media, the reason is we have to make it compatible in different browser (The devils IE8 and its predecessors too) and different devices (mobiles, tablets, desktops). Some of the feature like canvas is not yet supported in IE8, iOS doesn’t allow flash, and we can’t use lots of images and because it will reduce the site speed.
JS and CSS3 are usually two methods of adding animations on the web. Let’s see how we can use them because people are usually confused over their usage in web.
Animate with CSS3
IN 2007, Webkit introduced animation in CSS, that changed the whole scenario of the web animation.
Below is some CSS that will move an element 150px and 120px in both the X & Y axes in 500ms.
Animate with JavaScript
Writing Javascript is quite difficult. Below is the JavaScript that you would need to write to recreate the CSS transition we discussed earlier.
As you start adding more cases it will become more complex.
If you are using jQuery in your project already, you will likely benefit from sticking with it and using the animate() functions.
Both CSS3 and Javascript have their pros and cons. We can code some basic animation either through Javascript or CSS3 but it is important to know which one should be used when:
If we have some simple effects like color changes on hover, changing dimensions of an element, simple fading effects, or combination of these types of simple effects, we can use CSS3.
But if we want more controls over animation like images slider, or calling animation on some custom events, effects on mouse movement, parallax effect etc. we should use Javascript.
Instead of using core javascript we should use javascript framework like jQuery that can ease our task. These days we have lots of javascript libraries available to ease our animation process. Some of them are-
The world that we’re living in today, is almost entirely technological. And it is evolving every day with the wonders of Artificial Intelligence (AI), Business Intelligence, BlockChains (like NFT), etc. In order to make people’s lives easier, these smart technologies use complex algorithms and theories to quickly compute and summarize data. This data is then provided to users in the name of ‘useful information’. But a question that needs to be asked here is that what is the point of this data if the users can’t understand it? And if so, they might not even find it beneficial for themselves or their purpose. Hence, this is one of the most important reasons as to why dashboard design has grown significant over the last few years.
One of the first things to understand is that as much as UX of the dashboard is important, so is the UI of the dashboard. They are both equally essential. Before jumping into our main motive, let’s take a quick sneak peak into the most prominent features of a great dashboard:
A good dashboard allows its users to interpret, analyse and present the key pointers, or say insights.
What an efficient dashboard do is present the user with useful information that can be put to use. As well as compile a visual representation of the otherwise complex set of data.
The desired dashboard will always be customizable and it generally is quite intuitive.
As an additional point, they are always organized when it comes to use of space. There might be a lot of data on the dashboard but it won’t seem like a mess that is cluttered all in one little space. Rather it looks neat.
NOW WE’RE AT THE HERE’S HOW SECTION
CONSISTENCY MAKES IT EASY
The dashboard should always be consistent. Considering that the users access the dashboard through different devices that also vary in screen size. It is important that the design looks consistent, whether it’s with respect to the colours, font, style of charts or navigation. The user should not get distracted because of the inconsistency in the dashboard design and so sheer attention should be paid to how the design dashboard looks on multiple screen sizes. The key is to start with smallest screen size and then move up along the way. This way of approaching the design is a golden rule, this helps in creating a visually appealing dashboard, which gives both a great UX and a great UI.
SIGNIFICANT INFORMATION APPEARS FIRST
Let’s talk about the heart of designing a dashboard, ‘content hierarchy’. Although this goal is achieved at the UX stage of designing, but is essentially through visual design that conveys the most important information in the most efficient way. This not only guides the layout but also the design guidelines. A couple of things to note here is that; (a) Centre alignment is the most recommended as found out from the users’ behaviour pattern on the dashboard. They acquire that part of the information in the first place ; (b) Another thing is that 18 pixel font is the maximum to be employed and information should be highlighted through the use of distinctive colours.
COMFORTABLE CUSTOMIZATION
Never use the ‘one size fits all’ approach. There are different users with varying business needs and requirements. Designs should be scalable, so that the user experiences customized dashboard. Now this in turn will empower the users, which is the designers’ ultimate goal. Users should feel that they can adjust their fit in consideration to their individual business requirements. This can be as simple as adding or deleting a column, or even adding a whole new table or sheet. The things to remember here are: (a) Always allow for easy modifications like addition/deletion of modules; (b) Give different yet comfortably usable options for viewing and deleting data separately; (c) And lastly, try using easy drag and drop interaction for the users to experience customizable dashboard design.
CHARTS? LESS IS MORE!
When it comes to presenting data visually, i.e., via pie charts, bar graphs etc., they should always be put in simpler form. Cluttering the charts with heavy tools and representation techniques only hinders the user from understanding and using the said data. Instead of using 3D graphs and animation, using flat-laid charts and graphs makes it a lot more comfortable for the users. Colour differentiation although, is sheerly appreciated, since it allows the users to understand the separate sets of data clearly.
ICONS CATCH THE EYES
What is generally ignored in the process of designing a dashboard UI is the ‘icons’. The best dashboard designs always include icons that are familiar to the users. For example, the pen/pencil icon is usually the edit tool. Likewise, the trash icon is for the option of deleting anything. This way, the user would have less time wasted in processing what the icon means and would have more utilized time in wrapping up their work. Thus, familiar icons help create great UX and UI.
RIGHT FONT REMAINS IMPORTANT
Employing the right style of the font and its size is equally important in both the UX and UI designs. It is advisable that while designing, not more than two fonts shall be employed. This is done in order to maintain a clean dashboard design. Creating a visual hierarchy by employing the inverted pyramid style in all the written content is quite significant. This can be done by putting the most important sets of information in the largest and the not-so-important sets of information in the smaller font, along with a hint of colour differentiation.
FILL COLOURS IN DESIGN AS MUCH AS IN LIVE
The concept of colours is such that, it might seem simple, but it also has a complex side. Different colours signify different things. Just like red colour is usually employed to denote danger and green colour is used to denote ease and agreement. Now, imagine if their use is reversed, won’t it be confusing? Therefore, designers are required to be really mindful whilst working on the colour palette of their designs. Besides, it is best not to go overboard with the colours, even if you’re tempted to do so. A good start would be picking two colours in the initial stage, that too something like contrasting contemporary colours.
MAKING THE FINAL POINTS
All of this would be worthless if you don’t know your users’ preferences. Whatever the studying concept maybe, if you don’t have the emotional connection with your users and if you don’t know their choices and requirements, then the whole work would just remain pointless. Therefore, besides knowing the tips and right ways of employing the tools to create a great dashboard, you should also know your users. Research, understand, analyse and imply your methodologies and tools.
Taking your leave with,
“Graphic design will save the world right after rock and roll does.”
