How to design a great Ui

This blog post is some what different from my regulars. I am going to share my views on how to design a great UI. Primarily I will be focusing on Windows and Windows phone based applications but this can be applied to other types also.  This post is not for professionals. Its for amateurs who are just getting into programming. I am an amateur myself and I don’t claim that this blog post is perfect. It’s the guidelines that I chose to follow.

Most of the applications I have seen possess robust functionality, but they fail to impress the user simply because the UI isn’t pleasing(often complicated) . Programmer’s often tend to give lesser importance to UI design.

1. Don’t be satisfied till you like it:

Designing an UI is a tedious process. It involves a lot of imagination and lesser logic. But just because designing is a tedious process jus don’t leave it as such. If the creator doesn’t like it, the user is definitely not going to like it. Try putting in a lot of effort till you like it.

2. Colors:

Play around with colors. Experiment with them, see how every color suits your application both background and foreground. But make sure you select those such that they form a great combination. Don’t choose colors that are flashy unless and until its for a specific purpose.

3. Background Picture :

If your application is going to involve a background pic, it is going to play a crucial role in the design. I have spent days finding the right background pic for my windows phone 7 applications. There are some rules while you are choosing the background pic. Don’t choose a background Pic just because the picture is great.  It should be chosen in such a way that the application theme, foreground and the control colors match. Another important thing is, even if the pic is great make sure it doesn’t hide any of your content. This can happen say, when the font is white and a small portion of the pic is white (obviously if both of them overlap).  Normally , an abstract pic is the best for a background.

                      

I used a simple stainless screen background to design an UI for my application – Med prompter pro.

4.Design tools:

Use design tools like Expression blend etc. for a rich UI. If you feel that expression blend and other software's can be complex try doing it with simple software's like paint and Microsoft Word. You can do a lot with the basic shapes in these applications. For example, in word take a rectangle go to format and fill it with a metallic blue.  You can then print screen this, crop the rectangle alone using paint and use it for various backgrounds.You can combine different shapes into one giving 3d effects to form a beautiful image and use to same process to create a stand alone picture. Its all left to your creativity. If you are looking for cheap alternatives try online editors like picknik or software's like GIMP,PAINT.NET

I designed the above pattern using Word really quick. All you need to need to do is make your imagination go crazy. This pattern I designed using a smart art list(with a single element) in a text box. I chose the color, selected the metallic design and rotated it. I created Multiple copies of the text box, arranged them properly. Then I printed the screen, pasted it in paint and cropped it properly.

5.Free pictures and icons:

Internet is a huge collection of resources. You can search the internet for free pictures and icons that suit your theme. You can use them legally in your application depending on the license terms. Download a lot of them, test them , play around with them , rotate them , combine them. You can use even Word to play around with them . Download an icon. Create a rectangle in word, fill it with a suitable color and place the icon in the middle! Print screen, copy paste in paint, crop to center. And there you go a simple picture with a nice background. 

I have downloaded a free picture here. If you observe the background more closely, you will notice there is a beautiful pattern plus there is lot of space. This space can be used for displaying your content (Great for Pivot and Panaroma)

            

 

My favorite  source - for Pictures : http://www.freedigitalphotos.net  

                                      for icons :http://www.commons.wikimedia.org/wiki/Crystal_Clear

6. Get Inspired :

Search of design samples based on the theme of the application. Make sure that UI is designed to match your theme. Get inspired by things like Metro design and AERO. They make your application feel really brilliant. If you think effects like AERO are complicated, there are always workaround’s (I have given one for transparency in my blog), try using those. I want to conclude my post saying keep your UI as simple as possible.

Read More

transparency: aero like effect–windows forms

The NEED:

For PC’s having Windows XP,98 it is not possible to bring in aero effects like Transparency. Since these operating systems don’t have sufficient resources, achieving both backward compatibility and superior aesthetics is going to be really difficult. Therefore workaround’s are the only option.

SMALL STORY:

I was designing a Windows form application – an assignment given by my professor. I wanted to make it backward compatible as he has a system running Windows XP. But I badly wanted to include the Glass effect (found in AERO), since I wanted my user interface  to look really beautiful. So I started looking for workaround’s. I did manage to find one(made me look like a complete idiot, since I couldn’t think of such a simple thing) . I am going to talk about the same in this blog post.

Prerequisites: Visual Studio

METHOD:

Consider a sample Windows 7 form:

It looks like this, completely opaque. To give it some Transparency, view the form’s design(Design view).  Click on the form ( such that the form gets selected not the controls inside the form) and view its properties ( You can do this by click the properties tab available on the right hand side of Visual studio or if its not present press CTRL + W,P). Now scroll down and find the property called Opacity. By default this will be set to 100%. Set this to 90%.

And there you go, you are done. Now press F5 and you can see your form having the beautiful transparency effect. You can adjust the value of opacity to vary the degree of transparency, but make sure you don’t increase transparency to an extent where content cannot be seen.

CONCLUSION:

You can see that the transparency effect has made the UI really better. Try changing the color that suits your application and transparency. This process makes the control’s inside the form(almost all) to exhibit transparency. This can be used in Windows 7 and vista also, if you think that using those Aero DLL’s is a tedious process.
Download the sample source code here. Here I have varied the transparency based on a track bar.

Read More

Artificial Neural networks in marketing

What is an Artificial neural network?

Human brain is made of large number of nerve cells or neurons. These are interconnected in a beautiful fashion to form what is called the Neural network. This neural network is responsible for what we are, what we do in our daily life, the reason we learn, remember, process etc. This is what makes human intelligent.

What if we could simulate the human brain’s neural network? Imagine a computer program that somehow is built in the same manner as the brain is. It could do wonders. Alright I have to agree I am being insane here. It’s not practically possible to simply simulate what our brain does using a computer program. But yes let’s say if we can build a program that is very very very inferior to our brain still it can do a lot of wonders. The main reason is because it can learn and perform everything on its own. This particular software code that tries to simulate the neural network of human brain is what is called Artificial neural networks (Neural networks created artificially) in short ANN.

Why ANN?

Let’s look at the traditional approach to programming. Say we have an event occurring, if a condition ‘A’ is satisfied do something if a condition ‘B’ is satisfied do some other thing. If there are multiple events we write multiple codes for that. Now an undeniable fact is that the programmer should know all the cases and the paths that are going to be taken and should provide a case specific action. What if the programmer forgets a case? Or what if the cases are too much to handle? What if the cases are not known or cannot be thought of? The programmer has to again write the code after the issue is reported and build it again. And this process keeps happening like we get version 1 of software, version 2, 3 and so on.

Now what would it be when you have a system that can learn automatically. If there were to be a program that is intelligent to learn, adapt and perform operations. This is possible using ANN. ANN offers an unique approach to look into a problem. ANN does not require explicit coding of a given problem which gives a significant advantage over the traditional approach. ANN is very flexible, it can be trained, and it can Measure and interpret expectations

Alright!! enough with the technical talk. What has this stupid thing got to do with Marketing?

In simple terms, ANN for Marketing can be viewed as software tool that helps the Marketers to take decisions. Before the actual marketing process, there is something called the market research. First, I will deal with specific examples here for easier understanding. Let’s say for market research you have a survey. Say you have 10 people being interviewed. Fine a human can personally sit down, interpret the answers and to an extent give a quantified output. Let’s say we have 10000 people are being interviewed. Now its not possible for human’s to do it. Even if you employ a large number of human’s to do it the disadvantage is that the way everyone percepts the answer will be different. Secondly, it leads to wastage of human resources. The most obvious choice is to look for a software tool. Let’s use the traditional approach to build a software tool. Obviously this software has to identify patterns of words or text that are to relevant and convert them into something that can be measured or in other words quantified. Now what if the pattern is not known to the programmer? An answer can be in a variety of forms. I can give an answer like – “This is bad”. Another person can say the same thing in a different form – “This sucks”. Now both nearly mean the same thing -that the customer is not satisfied about something. Using a case based approach this becomes really tedious. But with ANN it’s much easier.

ANN can be recognize patterns, pick up key information that are not easily identifiable, develop relationships among them. Nothing is explicitly coded. There are also ANN’s that can automatically interact with the environment for learning without any explicit training.

While doing market research, it is very difficult to develop the relationship among the parameters, recognize patterns. ANN does this automatically. One can even find those missing parameters, check their importance and much more.

One more interesting capability of ANN is its predictability. What happens next is a big question mark? Given the intelligence of ANN, it is known to have a very good predictability. Say how a price of commodity would be at a later stage, is a key factor for building the marketing strategy. ANN’s predictability in many cases have proven to be close to accurate.

For more resources, please post a comment with your mail id.

Read More