Design of a outsource development company website from SE Asia (Thailand): personas, usecases, implementation

Today we are going to make an analysis of an IT development company website from SE Asia: http://www.addlink.com/en/ .

Lets start from usesecases. Thai IT development company website must acquire customers in country and overseas. We are going to check this UX with four personas:
1) a Product manager from a foreign IT company who is looking for outsource agency in Asia (India, China, Thailand).
2) a Businessman from Thailand who needs development service.
3) a Startup member from USA who is looking for cheap development of their idea.
4) an Employee who is looking for new job in IT company

How to use material design in UIs of softwares, websites and applications

If you are developing application for Android you should know what the "Material design" is. The main idea of material design is in implementing natural rules (shaddows, gravity) of outer world into UI.

A group of Android's designers started to discover real physical rules to make flat 2d design more attractive. They made many experiments with light and motions to discover how elements behave in material world.

Indigo Bookshop usability test

Internet was going to kill the paper books business. But still it helps to sell it.
I try to test usability of Indigo Bookshop as example.

Drive the e-disc!

Do you know what will happen if you upload 30 Mb file as attachment into your email? The service will upload it in the file storage. Today we will check their interfaces.

Let us test the Gmail and its storage – Google Drive.

How to make good promo site

If you have developed nice online system you have to have nice promo site also. Users need the first page to enter the system. It is a web page where you have to give some kind of good impression for your existed and future customers. You don’t need something extraordinary with plenty of information. It has to be simple. Web designers usually put there big photos of happy people, motto and registration/login form. Social networks are good systems to explore this kind of promo pages.

Fast view on the Gmail UI/UX solutions

Email had been the most useful internet service until Web 2.0 and IP telephony were developed.  It was more than half of traffic in the networks in 70th-80th. Now the mail is fading because social networks and skype have better features in messaging. But still every person or company is obligated to have email because all conformations and passwords come there.  There are a lot of mail services but we want to check the most popular one – Gmail.

How to complicate a pizzeria web site

Are you hungry? I am going to order pizza in London. I have chosen http://www.basilico.co.uk/ web site. It is in third line in google search and I like basilica.

The main customer's aim is to order pizza in online pizzeria. They are not going to explore the web site, hungry customers want to find proper pizza and order it (1. find – 2. order – 3. eat). It has to be simple and straight. The web site can have big logotype on the header in case the pizzeria is offline also. Visitors can accidentally recognize signboard logotype in the city and come in if the pizza was tasty.

The cheese e-shop web design mistakes

Here is a Dutch cheese internet shop. I think the main aim of any e-shop design is customer’s purchases. We have to put all parts of web site in right order to force them click on “Buy” button. Let’s have a look on this site.

Hamburg' web-design studios sites analysis

Many web-designers prefer work hard than write articles. They have many successful and unsuccessful ideas but never share these in public. Many designers work alone in different studios all around the world. Sometimes their art-directors can force them to show interesting projects on some festival or inspiration site. But mostly layouts are not shown for colleagues. Customer’s web-sites are in permanent motion and brilliant ideas can disappear in time. We are losing many beautiful designs everyday.

The casual projects may be not so brilliant, but personal sites of design-studio have to be brilliant any way. I hope the best ideas are integrated in these promo-pages. Let’s try to analyse them. I choose some sites from the google first page list on search request “Hamburg web-design studio”.

On Victory day

On Victory day I decided to have a look at Russian web-sites about Second World War. Russians celebrate Victory (in Europe) not like other nations on 8th of May but on 9th of May. The final of the Second World War is very important for them because it was their last big victory.

IKEA web-site design

When people talk about IKEA they usually expect good and simply design from Sweden (actually from Holland now). There is a strong antiIKEA movement among designers but we are talking about huge part customers who adore this brand. If you visit IKEA main page you can hardly link it with the company because there are very bad visual decoration and usability. You can hardly believe that company tries to spare on web-designers. I have no idea what is the reason of such uncomfortable design. Lets have a look at their others pages and try to analyse what's going on there.

Xing UI/UX design and decoration

I want to tell you about German social network web-site Xing.com. It is a social software platform for professionals. Xing competes with LinkedIn for the same audience. Germans are betting on web-site design and usability in this battle. They use corporative style with many modern design features.
People react on faces much more than on any other objects. We used to see faces even in abstract paintings. Scientists discovered that there is fusiform face area in human brain that recognizes faces bypass normal image perception. This phenomenon is frequently used in commercials. Designers put people in ads to promote wares. This trick is powerful but for some reason seldom in web-design. Xing uses faces widely. We can see it here from the first page. Professional pictures with smiling people make the first impression friendly.

Where has to be “log out” button

There are a lot of important details in user interface that are neglected by many web designers. The demonstrative one is a “logout button”. It is very important for people who use public computers or these who share their computer with other people.

I spent a lot of time to find it in facebook.com ones. It was obvious for me that “logout” has to be visible in top right corner of the screen. But I couldn’t see it. Then I realized that small blue arrow was link to a submenu. When I opened it I looked in the bottom of this menu and I couldn’t find “log out” again. It was terrible because I used public computer and didn’t want to leave my account opened. After some minutes of recon I finally found this button in the submenu among “help” and “settings”. Surely I was in rush and this can be a reason of my fault. But anyway this is a good example to show how people think. I was looking for “log out” in top right area of the screen. When I couldn’t found it – I didn’t even try to find the button in other places but was continued to search in the top right. Then I was looking “log out” at the end of submenu list because unconsciously I realize that logout is the end so it has to be at the end of the list. It is little design defect that made my first facebook impression upset.

Where do the most important objects have to be on the web page?

People accept the objects on the web-page in order of priority. The sixth rule of web-design said “Design puts information in order”. First of all they skip header, left and right margins because they know there is unimportant information (logotypes, ads etc). People start look through the page from the left top side of the layout central part and continue to the right bottom. We have to put the most important objects in this area. For example, what do people expect to see fist on the toy’s online shop? They want to see how the toy looks like. So the right solution is to put in the left top part an image of it. Where we have to put a button “Buy!”? It has to be in the right bottom because people will buy only after looking through all the information.

Human’s peripheral vision is also very important. People don’t watch there but they really see and unconsciously know what there are. Left and right margins are some kind of backgrounds for main information. What we need to show for our customers on these backgrounds? It depends of the website purpose. If it is on-line shop we need to show that this ware is not alone and we have other ones. 

 

Design has to be light

Web design has to be user-friendly from the first glimpse, without reading.  Users like simplicity and intelligibility in site layout. They are afraid of a large number of details and information. Plenty of images and decoration elements make website heavy and ugly. We have to think about real functions of decoration elements before using them. Users are afraid of web pages that are full of information. Using the white space and margins is the way to solve this problem. White space brings effects of lightness. Users are afraid of fonts and colors variation because it damages perception. It is not recommended that web page has more than 2-3 fonts and 2-3 colors. Gradients and patterns, gif animation, blinking and running text were popular in 1990^th because it was modern and progressive computer based style. The goal of old school web design was to amaze users with modern decoration. But now it is just a trash that hides information.

Design puts information in order

Good design makes information acceptable for people. The difference between text on sheet of paper and designed text is in perception quickness of the last one. Designer controls the readers’ attention with boldness, colors, placements, font sizes etc. We have to divide information into groups and detect more and less important of them to put in right order. For example, all the contacts on the web page have to be in one group, one style and one place, image caption in the article has to be in the same group nearby its picture etc. Complicated design makes readers tired. We have to predict how users would perceive information and send them in the shortest way.

Design is the unity of dissymmetry and symmetry

Most of people favor symmetric placement of objects in layouts. This is natural feature of mind. People also favor when human body is symmetric, hands, eyes and legs have the same size. Any disproportion makes body ugly. Preferring of non-symmetric bodies is kind of perversion. That is why we have to make the alignment and distribution of layout parts. Objects have to be kept on the same distance one from another. The gap from left/top has to be the same size like the gap from the right/bottom. This rule can make any website acceptable for the most of users. On the other hand the inner world of human being is beautiful if it is non-symmetric. When people think symmetric they are boring. Symmetrical design makes layout stable and dead. We have to put disproportion in weight of webpage objects to make it dynamic. But these parts still have to be symmetrically distributed and aligned in the same time. Neglecting of symmetrical borders and distances between objects can be used for design perversion of website.

Design makes information readable

One of the main design goals is broadcasting information. Designer has to use some rules to make information readable. First of all, design has to be contrasting. Red text on blue background is not good because they have the same saturation. You can read it but it is hard. It is easy to check your layout if you convert it into grayscale. Colors with the same saturation became equal. It is better to use colors with different saturation: red and yellow, red and white etc. Don’t put under the text gradients and multicolor images. Decoration have to help people easily percept information instead of attraction. Good designer can use the same principle in other parts of his/her job. If you are choosing the font for main text you have to remember that handwriting fonts or gothic will be hard for that.

Design uses customers stereotypes

Designer has to reject quasi-scientific knowledge about the secret meaning of decoration elements such as colors or shapes. You can construct a web site using Feng Shui principles. But it has sense in case when customers are in this Chinese culture code. Some people think that colors have some meanings. Black means death, white – life, red – aggression etc. These are only stereotypes that depend on the country you live in. I can broadcast sadness, love and happiness using black because color is just an instrument. Some designers say that serif fonts are better for users to read, others say it about sans-serif fonts. It is better to use your own sense of the beautiful. Stereotype is not the archetype. This is the knowledge people accept during their life. Most of them are wrong but sometimes they are our only way to communicate with taret group. Otherwise you don’t have to make a conflict with your employer. If he believes in Feng Shui – don’t make any sharp shapes in web site.

Design has its goal

It is very important to understand the goals of future website design. The purpose can be useful – for example “logout” button ought to be clearly visible. Or it can be esthetical for better connection with culture code of auditory. For example car body design has nothing close with engine characteristic. But we feel that heavy design can be marker for strong vehicle and streamlined shape tells us that car is very speedy. Constructing serious website you have to try heavy design. If your goal is to attract attention, the website has to have decoration that will shock users. There are no celebrities on ads luxury watches any more because people remember not the brand of watches but celebrities. It is very important to detect your auditory and choose the goals of the site.