DEV Community: Akila Maithripala

5 Psychological theories that are used in UI/UX Design

Akila Maithripala — Fri, 14 May 2021 05:49:00 +0000

Designing is an art. When a good design is used on top of a good interface, it creates a beautiful harmony between the two layers of technology. Same way, no good design is valued if the backend is non-functional and vice versa.

Keeping the backend aside, let's see how to use science to arrange designing elements we use every day to please the human brain.

Here are such design principles which were derived from psychological principles,

1. Isolation Effect

The isolation effect states that when many similar objects are present, the object that differs from the rest is the one that's mostly likely to be remembered by the user.

Take YouTube video playback window for an example, apart from the video itself, what's the first thing you see in that screen? Yes, the subscribe button. The only red elements in the screen are the YouTube logo itself and the Subscribe button.

It's like they both have an equal value. Moreover, it sort of gives an idea of what this service is and how it works, by highlighting the most important function of the service.

2. Hicks's law

Hick's law states that the time it takes for a person to make a derision depends on the number of choices available to choose from. Pretty obvious right?

Lesser the number of answers there is for a MCQ question, easier for a student to guess the correct answer. Same way, if the number of choices increases, the time to make a choice increases logarithmically.

So, the number of checkboxes, radio buttons you use on your interface can affect the overall experience of a user.

3. Serial Position Effect

Ever wondered why Hamberg menus are slowly becoming extinct? It's all bottom navigation now. Why? The serial position effect may have caught the eye of the designers.

It states that there's a tendency of a user to best remember the first and last items in a series.

So instead of making a vertical list, designers go for a horizontal series of elements while placing more important functions in left and right ends of the series. Like the Home and Message pages in Twitter app for an example.

4. Cognitive Load Theory

Cognitive load is the amount of thought someone need to exercise in order to complete a specific task. The theory also suggests that if the cognitive load exceeds our processing capacity, we will struggle to complete the task successfully.

There are three types of Cognitive Load,

Intrinsic cognitive load - The effort associated with a specific topic
Extraneous cognitive load - The way information or tasks are presented to a learner
Germane Cognitive load - The work put into creating a permanent store of knowledge (a schema)

Considering Cognitive Load mean that you always care about the amount of information a user has to keep in mind, and also if there's a process involving routine of tasks, make it a pattern that's available everywhere in the application, so users get more familiar with it.

5. Proximity Law

The law of proximity states that objects that are near, or proximate to each other, tend to be grouped together.

It means that our brain can easily associate objects that are placed together, rather than objects that are placed far apart.

There are 72 circles in the image above. We tend to recognise the circles in groups based on the distance between them. Categorically, we can also see that there is a group of 36 circles on the left side of the image, and 3 groups of 12 circles on the right side of the image.

So, there is a scientific way to approaching in grouping things together when designing a UI, and also, be mindful when grouping elements together since users may naturally think they are associated with each other.

Finally, this has been a brief introduction to how psychological findings can be used to enhance usability and visual look of a user interface. Dig more into these theories to get a good idea of them and also, you'll find many more scientific discoveries that might be beneficial in effective UI designing.

A Brief Introduction to Colour Theory

Akila Maithripala — Wed, 21 Apr 2021 13:36:54 +0000

Whatever the art or design you do, colour theory plays an important role in conveying your message to your audience. Although many won't really know it, the colour mix you implement in your designs can affect the audience in a psychological way.

Before going that mental, let's dig up the basics.

Colour Systems

Understanding colour system is vital in reproducing more colours. There are two main colour systems.

Additive
Subtractive

Additive colours are used in screens while subtractive colours are used in printed materials. Another way of looking at this is that objects that emit light use additive colours and objects that reflect light use subtractive colour.

1. Additive Colour

Primary colours of this are Red, Green and Blue (RGB). This is the holy trinity of additive colours that is the basis for all colours that's used on a screen. Combination of all these colours creates white, and absence of the all three colours is black.

2. Subtractive Colour

Primary colours of subtractive are cyan, magenta, yellow and black (CMYK). K stands for 'key' because cyan, magenta and yellow don't fully absorb light and a need arose for a compensating colour to account for this. Hence, black is added as a fourth colour.

Colour Wheel

A bit of a history for you; the colour wheel was invented in 1666 by Isaac Newton, as he mapped the colour spectrum onto a circle. The colour wheel is called the basis of colour theory, as it shows the relationship between colours.

Colour Wheel is used to find colour harmonies by using the specific colour combinations. Colour harmony is achieved by using colours that look good together.

Colour Combinations

1. Complementary Colours

Complementary colours are two colours that are on opposite sides of the colour wheel. A combination of two of these like this provides a high contrast for your work and these colours will appear brighter and more prominent.

2. Monochromatic

Monochromatic colour is used as shades, tones and tints (later explained) of a one base colour. It adds minimalism to your work and also it's easier to design too.

3. Analogous

Three colours which are placed side by side on the colour wheel are called Analogous colours. The idea is to use one colour as the dominant colour and use the others as supplementary colours. This combination is often called a versatile but overwhelming combination.

4. Triadic

Triadic involves three colours that are evenly spaced on colour wheel. This combination creates a high contrast, bold and vibrant colour schemes.

5. Tetradic

Tetradic is four colours that are evenly spaced on the colour wheel. As in the analogous combination, this combination works best if you let one colour be dominant and use others as supplementary. Although they make a bold impression, more colours means it is more difficult to balance them all.

Warm and Cool Colours

The colours of colour wheel can be also divided as warm and cool. Warmness or coolness is known as the temperature of a colour. According to psychology as mentioned above, different colour temperature evokes different feelings.

The general idea is that warm colours arouse or stimulate the viewer and cool colours make the viewer calm and relax.

Three Components of a Colour

You can refer to many different 'colours' as when you say the name of a certain colour. To overcome this, there are three primary factors that help in defining a colour.

1. Hue

Hue is defined by the position of the colour wheel, and it represents the name of the colour.

2. Saturation

Saturation defines how saturated (rich) a colour is. Saturation at 100% is the normal state of the colour while 0% can result in just a shade of grey.

3. Brightness (Luminance)

Same as the saturation, this is expressed as a percentage between 0 and 100. 0% brightness of a colour is black and 100% bright is the full colour.

Shades, tints and tones

Shade

Created by adding black to base hue and it makes the colour darker. This results in a deeper and richer effect and can be overpowering at times.

Tint

Created by adding white to base hue and results in lighter colour. It decreases the intense and used to balance vivid colour combinations.

Tones

Created by adding black and black and white (or grey) to base hue. Tones may not look lie pastel but can reveal complex characters which were not apparent in the base hue.

Conclusion

This has been just an introduction to the world of colours. However, with the basics in mind, you can explore more combinations and techniques to use colours in your designs to really make an effect on the viewer.

The future of cryptocurrencies and whether you should care.

Akila Maithripala — Sun, 10 Jan 2021 14:22:02 +0000

If you missed the big crypto news because of the recent chaos in the States, be amazed that bitcoin is now worth more than 40,000 US dollars as of 10th January 2020.

With this hype all around, people are wondering where they should invest in bitcoin. But the cryptocurrency subject also creates a wide array of concerns.

Of course, it's a risky way to invest your earnings, same as spending money in a casino, because you can't predict the future.

Is bitcoin too risky for the average investor?

Compared to most investments, bitcoin is a volatile and risky investment. During the 10-year history of bitcoin, there have been a number of times where it really went up and then came crashing down rapidly.

Now, this can mean big returns, as well as big losses according to the way you handle it.

If you do decide to invest, better hold the bitcoin for the long-term. By design, there is a limited supply of bitcoin so as demand increases, the price will increase as well.

Can bitcoin be easily converted to paper money?

Currently, most of the bitcoin transactions are done by converting them to paper money, like the U.S. dollar.

PayPal recently announced that soon, consumers will be able to use cryptocurrency as a “funding source for purchases.” But what that really means is when a user pays with bitcoin, it will be instantly converted to a national currency and the transaction will be settled with the PayPal merchants in that particular currency,”

But that process of transferring and converting bitcoin to different accounts and other currencies are very much time consuming.

Of course, in the future, technology advancement will make it easier to spend bitcoin with quicker and cheaper transactions that are more usable.

Where next?

Chamath Palihapitiya is a billionaire investor born in Sri Lanka.

So, what to believe? There are many optimistic forecasts for the bitcoin price in 2021. “It’s probably going to $100,000, then $150,000, then $200,000" Chamath Palihapitiya, founder/CEO of Social Capital said recently. "In what period? I don’t know. five or 10 years, but it’s going there.”

As long as the bitcoin rate is climbing, sure, it’s a good protection against inflation too. But it can also go down, that means, you’re losing money – you’re not keeping pace with inflation but also losing the capital.

At this time countries will also take steps to protect their currencies and ability to tax, so the more you believe this is anything more than just a store of value, the more risk of government intervention you face.

The Golden Rule

As of now, the golden rule of casino; "Bet Only What You Can Afford to Lose" applies very well to bitcoin and other similar cryptocurrencies.

If you are lucky enough to have some spare cash with you in 2021, it looks like the only way to make some respectable gains is either gambling, the stock market or crypto. Any method you choose, first study it well and always remember to follow the golden rule.

How to create and compile LaTeX documents on Visual Studio Code

Akila Maithripala — Thu, 10 Dec 2020 13:30:11 +0000

We all know that when it comes to typesetting lengthy documents, LaTeX is the answer. You only need to focus on content, and LaTeX will do the formatting for you.

There are many online LaTeX compilers like Overleaf and offline editors like TexStudio but still, if you want to edit LaTeX documents on your favourite text editor (yes, it's everyone's favourite), this is how to do just that, on a Windows system.

1. Installing the TeX distribution (TeX Live)

TeX Live is a straightforward way to get up and running with the TeX document production. It includes all the major TeX-related programs and fonts including support for many languages around the world.

You can download TeX live installer here.
install-tl-windows.exe (ctan.org)

If the above link is not working go to this link and download install-tl-windows.exe
Installing TeX Live over the Internet - TeX Users Group (tug.org)

Then "install" the program (not unpack) and wait for the packages to install.

Reboot after the installation is complete so it will reload the environment variables.

2. Setting up VS Code

To export LaTeX documents to PDFs, view PDFs, Intellisense and more features, we have to install an extension for VS Code.

You can install the extension from the link below.

LaTeX Workshop - Visual Studio Marketplace

For additional features you can install LaTeX utilities, but it is no longer maintained by the developer.

LaTeX Utilities - Visual Studio Marketplace

All done! Now you have set up the environment for creating LaTeX documents.

Let's test our setup with a practice code.

Create and save file with a .tex extension on vscode. (eg: "mydocument.tex")

\documentclass[12pt]{article}

\usepackage{amsmath}

\usepackage{graphicx}

\usepackage{hyperref}

\usepackage[utf8]{inputenc}

\title{How to Set Up LaTeX on VSCode}

\author{Mozilla Club of UCSC}

\date{2020–12–10}

\begin{document}

\maketitle

\section{Introduction}

Here is the introduction of our text

\begin{itemize}

\item One

\item Two

\item Three

\end{itemize}

\end{document}

After saving the file, click on the magnifying glass icon on the top right corner.

Now it should display the PDF view of your latex document on the right side of the VS Code window.

If it doesn't show up, click the TeX icon on the left horizontal menu, and click on "View LaTeX PDF" under the COMMANDS palette.

Compiled PDF document will now open with your default browser.

That's it! Now you can create and export LaTeX documents on your favourite text editor. If you have any problem regarding the whole process please drop a comment below.

Google Duplex: The most lifelike AI yet

Akila Maithripala — Wed, 04 Nov 2020 13:35:14 +0000

Person 1: Good evening.

Person 2: Hello?

Person 1: Hello.

Person 2: Hi, um, I’d like to reserve a table for Friday the third.

Person 1: OK, hold on one moment.

Person 2: Mm hmm.

Person 1: OK… hold on one second.

Person 2: Mm hmm.

Person 1: So Friday November third. How many people?

Person 2: For… two people.

Person 1: Two people?

Person 2: Yeah.

If you remember this conversation, you sure watched the 2018 Google Annual Developer Conference. Although it looks as it is on text, this is not a person calling a restaurant to reserve a table. It’s the Google Assistant, the Google very own AI calling the restaurant “on behalf” of a user to reserve a table. This technology is a result of a project called "Google Duplex".

As you know Google Assistant is built on Artificial Intelligence. It saw the light as an assistant feature to Google Allo and Google Home in 2016, and then released as a standalone app in 2017. Of course, it now has many competitors to compete with.

Apple’s Siri, Amazon’s Alexa and Microsoft’s Cortana are the main three competitors of Google Assistant. Hence it requires a major leap in terms of technology to be ahead of the competition. As there’s no human-like conversation mode in any of the other mobile assistants, it looks like duplex boosted the game for Google Assistant.

What is Google Duplex?

Google Duplex is a fully automated system. It was designed as a means to help people make business appointments over a phone, but without any interaction from the user. Just think the annoying time you spent on company calls dialling 1, 2 and listening to waiting tunes. All of that burden can be released from your head using Google Duplex. It even says words like “um” and adds pauses to sound like a real human.

Security

This whole process may sound a bit creepy to the privacy-oriented user, but before answering a call, it identifies itself as being from Google. It also tells the receiver of the call that it is being recorded. If the receiver chooses not to be recorded, Google Assistant then transfers the call to a non-recorded line.

In the regions where the service is available, you can use Duplex to make a reservation at a restaurant, purchase movie tickets online or set up a haircut appointment. In the future it will provide you with features like making reservations for your doctor’s appointment or set up a time and day to get your haircut.

Hold For Me

A new Google duplex powered feature named Hold for Me is now rolling out to Pixel 5 series smartphones. What it does is that it takes care of hold-instances during calls. Often you might be put on hold during business calls and you are nervous about doing another work as someone on the other end might pick up the hold call. Hold for Me feature allows you to continue your tasks without worrying about the call. When someone finally speaks, it will let you know that it's time to talk again.

Despite the cool features, we need to think long and well about how this AI technology should be used and how it should not. Technologies that support services like Duplex are improving at a higher rate. In time, it will become harder to understand what's automated and what's human. It gets even harder if we don't have a clear understanding what the technology can do.

Recraft - Recycle and Reuse [completed]

Akila Maithripala — Sat, 24 Oct 2020 19:46:30 +0000

Team Declaration

Team Name - code360

	Name	Student ID Number	Github Handle
Team Leader	Yasith Samaradiwakara	19020742	@yasithsam
Member 1	Nethmi Rodrigo	19001462	@nethmirodrigo
Member 2	Nisan Abeywickrama	19000032	@lordreigns
Member 3	Isuru harischandra	19020333	@isuruvihan
Member 4	Akila Maithripala	19020432	@akilamaithri

What we are building

Every day, hundreds of waste materials are piling up in Sri Lankan households. Some burn them (causing major environmental damage) and some leave them as it is. But this issue can be resolved with the collaboration of waste producers and recyclers. Also, there are many individuals who are willing to reuse the items used by others, if it's in reasonable condition. We are building a platform to bringthese 3 separated partiess together, enabling a buy and sell method of waste items. Good for the environment and products gets reused; its win, win!

How we built it

[Initial Update - 22nd of October]
Honouring the cultural practices, our first task was to create a WhatsApp group. After dividing our work individually, we designed the system architecture the database. Used firebase to design the database. We will be finishing the design language conflicts and starting budling the UI tomorrow. All agreed to choose the 80's retro theme as our design language.

[Update 2 - 23rd of October]
After getting some inspiration from (rare to find) 80s retro themes, we finished the UI of user login and new user registration pages. Then configured them using node js. Also added firebase authentication for user login. We will be finalising the landing page tomorrow.

[Update 3 - 24th of October]
Designed the landing page UI components such as the navigation menu, footer, posts for latest post updates. As we agreed before, partitioned the landing page into three sections. Middle section serves as a news feed, showing the advertisements posted by users about the reusable and recyclable items in their households, and advertisements posted by recycling agents about collecting dates and times of goods. Left section shows the categories of Reusable products and right section shows those of Recyclable products so the users can easily navigate to the section they want.

[Update 3 - 25th of October]
Change of plans. After implementing the above 3-part landing page, we understood that it could be problematic for new users. So now we are going for 2 sides landing page. Added facilities to add post and events. Added Registration authentication.

[Final Update]
Added backend functionalities to filter and view ads. Added functionalities to appear posted ads in your ads and search facilities to the back end too. We think we a short in time to connect them to the frontend. So, we'll leave it there and work on the styling.

Conclusion

At the end, we are happy and proud of our final outcome. We did this project in the middle of 8-5 lectures, so there were some time management problems here and there. But we created almost everything we thought of doing on 22nd. Also, now we know our barriers, learned new things, shared new things, and we are more capable as a group than before. We are thinking of developing this as our side project when the competition is over, so we can get it into a commercial quality little by little.
So,
Features we want in the long run are,

To make users enable to response to an event happening in their area.
Users getting notified if there's an event happening in their area.
Event publishers can get the details (eg:location) of the users who are willing to contribute to their event.

Link to Code

Github
https://github.com/NethmiRodrigo/recraft