DATA VISUALIZATION

What is IT?

Data visualisation has been around since the 2nd century AD. It started off as just hand drawings, evolved into images using computerised technology. Its use of computer-generated images helps in gaining insight from the different links and patterns of the images.

Defining Data Visualization.

Li (2020) talked about a lot of definitions that are best suitable for the term Data Visualisation. The one that I think made more impact, was the definition by Bikakis (2018). “Data visualization is the presentation of data in a pictorial or graphical format”. This definition does not specify what type of data therefore, if we were to also combine this definition with Manovich (2010) ‘s definition of data visualisation we would get a definition that makes more sense. Manovich (2010) defined it as “A transformation of quantified data which is not visual into a visual representation”. Both these definitions mean the same thing however one focuses on what the data will become (e.g., “Pictorial or graphical format”). Meanwhile the other focuses on what type of data is actually transformed (e.g., “quantified data”).

What i did not Understand!

One thing I didn’t understand from this reading by Li (2020), was the two major sub-fields that data visualization is categorized into. Information visualisation and scientific visualisation. Mainly the scientific visualisation did not make sense. Since information visualisation visually represents abstract data, what type of data is scientific data really? In the reading they mentioned it as physically based data, like the environment, atmosphere or even the human body, but I still lack the understanding. What I understood is that the main mission of data visualisation is to transform data into information that can be easily understood.

Defining Data and Information.

Li (2020) went on as to define data and information, just what I needed for understanding scientific data really. He defined data as raw, unprocessed information which is meaningless, and it can take up any form. There are two types of data, primary and secondary data. primary data mainly is data that is retrieved directly from the source for mainly one purpose, meanwhile secondary data is data that has been recycled, from time to time, it’s not retrieved from the source itself, but from records. (Agarlwal, 2006, p. 3).

Information on the other hand, is the data that has been processed, technically its like taking that raw data and processing it, making it information (processed data). This processed data however must have meaning and must be understood by people otherwise it cannot be defined as information.

Forms of traditional data visualization

Traditional data visualization has many different forms, they have the ability to represent a large amount of data all at once in the form of graphical images. While representing the data, it makes it so that, the people analysing the data may come up with new knowledge. They are sometimes called visualization techniques, or forms of representation

These common forms within traditional data visualisation exist within a type of data visualisation. Within information visualisation exist tables, charts, trees, maps, scatterplots, diagrams, and graphs as the forms of data visualisation. Within scientific visualization is simulations, waveforms, and volume. Using these forms, one can gain knowledge or insight into a phenomenon.

These visualisation techniques are used mainly to convert data into information and best represent it. However, each visualization technique is selected based on the type of data. a single technique cannot work for multiple different data types. Data visualization mainly deals with two types of data: Data values and Data structures. The data structure falls onto the visual aspects like structure and patterns and they are more reliant onto the data values. Both these cannot exist independently as they rely on each other.

Different Forms of representation.

Now I am sure you are curious as to what these common forms of data visualisation are about.

According to Li(2020) TABLES are the easiest visual form to represent data, comparative data to be exact on a categorical level. They use rows and columns to show their data. they are clearer and more accurate.

With MAPS I get that they show relationships between spaces, and they represent the world’s surface. Maps are extremely powerful, one can use them to analyse location, or calculate location data or access locations into which no one has been there since maps have been improved from paper into computer software’s that are interactive and can actually show you the location you are looking for, without you actually having to go there.

Scatter plots are useful when showing correlations between two different variables or data that is mainly presented with x or y coordinates. They observe the relationships between datasets. They are mostly used in scientific research. Li (2020) claims that they enhance readers understanding of data

Graphs are similar to diagrams. Diagrams, charts, and graphs can often confuse someone as they are similar. Graphs present data in many ways. It can make someone realise something within the data. it may now be accurate but with its many features, it can provide insight and new knowledge.

TREES are visual forms that Li (2020) thought were common and are used commonly in data visualisation. Trees are good for organizing informational patterns. Trees are widely known for organizing data such as family ties, evolution and social structures or standings. Trees have different forms such as TreeMap, ScaceTree and StarTree and they each used to represent different type of data.

DIAGRAMS are visual representations of data technically, usually represented using shapes and lines. They simplify complex data, making it easier to understand. They are designed for a specific purpose to be clear, showing processes, comparing data, and there is more actually on what they are designed for.

Now this is something I am not familiar with, unlike the previous visual representations, WAVEFORM. Li (2020) says that it’s a type of visual representation that seems like a signal however it shows how the strength of the signal changes within time. It provides insights into the behaviour of a signal. Its mostly used in medicine, for example, doctors use it when checking the behaviour of your heart, or pulse.

SIMULATION is useful in scientific visualization. It assists viewers in understanding, natural phenomena for example weather changes. Computer technology is used to simulate these natural phenomena as to trace their behaviours. These are popular for gathering insight into climate related data

VOLUME is an important scientific visualization form. It’s usually a three-dimensional dataset that represents a scalar field, whereby each point has a associated scalar value or vector value. The dataset is obtained from sources such as medical imaging, simulations, or scientific measurements. Volume visualization represents and explores the datasets visually allowing people to gain insight about the patterns within the data.

CONCLUSION

Each type of data visualization has a characteristic. Information visualization’s characteristic is readability, its easily decipherable. And scientific visualisation is recognizability as its easily recognized or identified from past encounters. And both of them give meaning in their visual forms.

Introduction

Designing an engaging user interface and user experience is the requirement to captivate users and create meaningful interaction in this digital age. In this critical analysis I will focus on the UI and UX of my data visualisation website, analysing its layout, navigation, typography, responsiveness, and overall user experience. showcasing its strengths and suggesting ways I will improve it in the near future, which is tomorrow.

My Proposed UI and UX

What I mostly love about this website is how it welcomes its users with a clean, simple design, that is followed by a logo that is merged with the navigation bar. These visuals create a strong first impression and show how this website is committed to professionalism, yet creative and friendly. The colour palette is dominated by pink and purple, it gives a feeling of excitement, enthusiasm, and creativity, complimenting the content of data visualisation, as the Visuals themselves are captivating. The visuals of the website are well-thought with the headings and sub-headings in proper font and sizes that can easily enable the users to navigate through the content easily.

The navigation of this website is straightforward. The "Home," "Blogs," "Visuals," and "Design" sections are displayed at the top and centre, providing easy access to other pages and helping in locating content as the headings are clearly labelled. With the icons on the far right, to make the website even more appealing.

The sticky navigation bar remains fixed at the top as the user scrolls through the page helps in navigating. However, on smaller devices such as smartphones, the sticky navigation occupies most of the valuable space. What I intend to do in further production of this website is so that when using mobiles, the navigation bar will collapse into a small icon that the users can press on when needing to navigate elsewhere. Which will boost the user experience.

Typography is important in UI and UX, as it influences readability and aesthetics. The sans-serif font I chose gives a proper appearance, not too formal, not too friendly, just in between, aligning with the website properly., however I feel like the font sizes and line spacing especially in the mobile view need adjustments to enhance readability. And I want all sizes to be consistent throughout the entire website.

One thing I am proud of however is the responsiveness of the website. The media queries are well implemented and assists the layout in adapting throughout different screen-sizes. The content keeps its structure both in desktop and mobile devices, making the website highly responsive. However even though its good, I feel like I still need to add more effort in refining the design for smaller screens, to increase the user-experience more, because I am not proud of the homepage on mobile view. with that, I also want to comment on the blogs section, with my paragraphs breaking their structure as the screen is resized, I need to fix that, as sometimes the last paragraph is the first and the first is the last, and that just shows how the user-experience is affected in mobile view.

The design section showcases wireframe visuals, providing insight into the design process and the plannings and design choices taken before building this website. The use of images shows clear design concept to users. The use of captions user the images disrupts the flow of content, I am not sure of how I can place the captions however I feel like maybe on the side or top can be more visually appealing and won’t break the reading experience.

The design section lacks in user experience. I want to add brief explanations of each wireframe’s purpose in the next submission and explain each wireframe’s purpose and importance.

From a User Experience viewpoint, my website is good in guiding the users throughout the content with properly labelled headings and subheadings. The blogs section is structured with a good layout that has many clear headings and subheadings, promoting easy navigation and readability. However, I feel like adding more life to the text, such as adding images, could help in breaking the text overwhelm and help the users into seeing what they are reading about, increasing their user experience.

The UI and UX of tis website show a strong foundation, there is a lot of room for improvement though. The colour choices, navigation and responsiveness are the strengths of this website. To enhance user-experience, the design section needs refining and more interactivity. I feel like this time, I managed to succeed in creating a visually appealing and user-friendly website that focuses on both its content and aesthetics. In the ever-evolving world of web development, the UI and UX of websites are the key to creating better user experience.

Reflection

When designing this website, my aim was to have vibrant colours, to spark excitement and creativity. I was aware of readability and accessibility with using such bright colours, so I chose a cleaner simple font, sans-serif. And it made content consumption easier for viewers as the typography was more user-friendly.

My navigation bar plans were all about simplicity, so I positioned it on the centre of the homepage, and it acted as a focal point for my introduction. Which aligned with an idea by (Papanek 1984) that “Design is Intuitive”. I created a navigation that was aimed to increase user engagement, as after the user is done reading the introduction, their eyes would be directed to the navigation.

In terms of the UX, the typing animation gives the website a bit of personalisation and uniqueness. I added it so I can keep the users engaged.

My website does not have any CTA basically and that one was intentional. I was thinking on whether to control the pace for the users or let them read at their own pace, then I remembered that users want freedom. Nielsen (2006) says that users want to feel like they are in control, which made me leave out CTAs.

In the blogs sections, I was trying to be more professional, using the strong colours and using a consistent font, I maintained the same design structure. I wanted that section to be in-between creativity and formal. And now I realise that more white space around the text could make it more professional, giving it a distinctive aura.

Although I was successful in creating part of my ideal website, there is a lot of room for improvement and with the next submission, hopefully there will be less room for improvement.